CSS Section Separator Generatorは、斜め線や円弧など様々なセクションの区切りを作成して、HTML/CSSをコピーできるジェネレーターです。
CSS Section Separator Generatorの使い方
CSS Section Separator Generatorにアクセスして、作成したい区切りの種類を選択します。
![区切りの選択](https://techmemo.biz/wp-content/uploads/2020/04/css-section-separator-generator1-641x365.png)
「SETTINGS」でサイズや角度などを調整します。
![区切りの調整](https://techmemo.biz/wp-content/uploads/2020/04/css-section-separator-generator2-641x280.png)
生成されたHTMLとCSSをコピペして利用します。
![HTMLとCSS](https://techmemo.biz/wp-content/uploads/2020/04/css-section-separator-generator3.png)
例えば、ギザギザの区切りを選択した場合、以下のようなHTMLとCSSが生成されます。
<section class="spikes"></section>
.spikes {
position: relative;
background: #2c3e50;
height: 50vh;
}
.spikes::after {
content: '';
position: absolute;
right: 0;
left: 0;
top: 100%;
z-index: 10;
display: block;
height: 62px;
background-size: 62px 100%;
background-image: linear-gradient(135deg, #2c3e50 25%, transparent 25%), linear-gradient(225deg, #2c3e50 25%, transparent 25%);
background-position: 4%;
}
あとはサイトに合わせて色を微調整してあげれば完成です。
あとがき
様々なセクションの区切りが手軽に作成できて便利ですね。
一風変わった区切りを実装したい時は、ぜひご活用ください。