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には及びません。

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

Author

ミフネWEBのロゴ

ネットショップ専門のWEBサイト制作事務所です(個人事務所)。

部分的なテンプレートカスタマイズから、高速化や機能追加、新規ショップ制作などECに関するいろいろを承ります。(5,500円〜)

仕事のご相談は「お問い合わせ・ご相談」より随時承っております。