SVGを使わずにcssで区切り線を作ってみる

CSSでセクションを区切ってみる

1カラム型のページが増えて、増えてというか主流になってきて、各セクションをSVGで区切るサイトをしょっちゅう見かけるようになりました。セクションの背景を斜めにカットしたりカーブさせたりして区切るあれです。かくいう私もよく使います。

WordPressでも、Elementorなどのページビルダー系プラグインやブロックエディタ対応テーマでは初期標準でsvgの区切り線を挿入できるようになっているものが増えています。svg自作するのも手間だと感じる私みたいな人種には楽で助かります。

今日もいつものようにSVGで区切っていたのですが、「わざわざsvg差し込まなくても、よほど複雑じゃなければCSSで出来るんじゃ?」と今更のように思い出したのでシンプルなものを何パターンか作ってみました。

See the Pen section separators not SVG by Takashi Abe (@TakeshiAbe) on CodePen.

もっと複雑な階層構造にしたり疑似要素をフル活用すれば、さらに複雑な描写もできますが、そこまでする気は起きませんでした。あと、どうしても%指定のグラデーションは汚くなりやすいので、その辺りの美麗を求めるならSVGには及びません。

まぁどなたかの参考になりましたら。