最近スタートアップのホームページなどでよく見る、ページ1枚完結のサイトが流行っていますよね。
普通に色を変えてセクションを区切る作りが多いですが、せっかくなら他のサイトと差を付けませんか？
今回はセクション毎の区切りを簡単にCSSで調整できるデザインをご紹介します。
オシャレなものから個性的なものまで掲載しましたので、普通のデザインに飽きた！という方はぜひ取り入れてみてください。
SVGセクションディヴァイダーデザインCSS
See the Pen
SVG section dividers, embedded with Data-URI & colored with SASS by rinaw (@rinaw)
on CodePen.
SVGセクションディヴァイダーデザインCSS2
See the Pen
SVG page separator by Alexandr Kazakov (@alexandr-kazakov)
on CodePen.
斜め、傾斜のかかったセクション区切りデザインCSS
See the Pen
Slanted Sections by Adam Quinlan (@quinlo)
on CodePen.
波のようにウェーブがかかった水平線ディヴァイダーデザインCSS
See the Pen
Waves Content Divider Using CSS by CMDW (@candra-shalahuddin)
on CodePen.
種類豊富！セパレーターCSS
See the Pen
Row Separator by Emanuele (@emared)
on CodePen.
スカラップ風ページ区切り線CSS
See the Pen
Responsive Scalloped Page Dividers (using CSS gradients) by chilli con code (@chilliconcode)
on CodePen.
白と紫が交互に傾斜するセクション区切りCSS
See the Pen
Responsive Skewed Page Dividers (using CSS gradients) by chilli con code (@chilliconcode)
on CodePen.
動かす＆マウスオーバーでスピードアップする虹色の破線
See the Pen
Rainbowy Dashed Divider by Simon Goellner (@simeydotme)
on CodePen.
カラフルな縦線がオシャレなアニメーション区切り線CSS
See the Pen
Vertical divider – coloured and animated by joehanna (@joehanna)
on CodePen.
