CSSでセクションを区切ってみる
１カラム型のページが増えて、増えてというか主流になってきて、各セクションをSVGで区切るサイトをしょっちゅう見かけるようになりました。セクションの背景を斜めにカットしたりカーブさせたりして区切るあれです。かくいう私もよく使います。
WordPressでも、Elementorなどのページビルダー系プラグインやブロックエディタ対応テーマでは初期標準でsvgの区切り線を挿入できるようになっているものが増えています。svg自作するのも手間だと感じる私みたいな人種には楽で助かります。
今日もいつものようにSVGで区切っていたのですが、「わざわざsvg差し込まなくても、よほど複雑じゃなければCSSで出来るんじゃ？」と今更のように思い出したのでシンプルなものを何パターンか作ってみました。
See the Pen section separators not SVG by Takashi Abe (@TakeshiAbe) on CodePen.
もっと複雑な階層構造にしたり疑似要素をフル活用すれば、さらに複雑な描写もできますが、そこまでする気は起きませんでした。あと、どうしても％指定のグラデーションは汚くなりやすいので、その辺りの美麗を求めるならSVGには及びません。
まぁどなたかの参考になりましたら。
