【CSS】波線の背景の作り方

こんにちは、Ryohei（@ityryohei）です！

本記事では、CSSで波線の背景の作り方をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

参考サイト

先日ネットサーフィン中に面白いジェネレーターサイトを発見しました。

面白いなーと思ったのは下記のサイトです。セクションの境目のデザインをジェネレータで作ることができるサイトになります。

https://wweb.dev/resources/css-separator-generator/

上記のサイトではいくつかデザインパターンが用意されていて、その中から気に入ったデザインを選んで設定を調整できるわけですが、その中にギザギザの模様をしたデザインパターンがあります。

これ、少し改良すれば波線も表現できそうな気がする！ということで本記事の内容を作るに至りました。

完成した波線の背景

色々と試行錯誤した結果完成した波線の背景がこちら。区切り線的な使い方のサンプルです。

See the Pen Background Wavy1｜CSS by ryohei (@intotheprogram) on CodePen.

背景いっぱいに波線を展開。

See the Pen Background Wavy3｜CSS by ryohei (@intotheprogram) on CodePen.

テキストに引くと下記のようになります。

See the Pen Background Wavy2｜CSS by ryohei (@intotheprogram) on CodePen.

下線として引く場合は間違いなくtext-decoration: underline wavy;の方が使いやすいと思いますのが、間隔やサイズ等を調整したい場合は上記の方法でも良いかもしれません。

波線の背景の作り方

作り方…といってもほとんどはジェネレータが作ってくれたものですが、下記が前項でご紹介したサンプルで使用しているHTMLとCSSです。CSSの.wavy::afterに定義しているスタイルが波線の部分になります。

HTML

<p class="wavy"></p>

CSS

.wavy {
    position: relative;
    /* テキストに引く場合は下記追加 */
    /* display: inline-block; */
}

.wavy::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    display: block;
    height: 5px;
    background-image:
        linear-gradient(135deg, transparent 25%, #ff0000 50%, transparent 75%),
        linear-gradient(-135deg, transparent 25%, #ff0000 50%, transparent 75%);
    background-size: 10px 5px;
    background-position: 0, 5px;
}

基本的に調整を入れるのは.wavy::afterに指定している下記のプロパティです。

• height：波線の背景を表示する高さを指定
• top: 背景いっぱいに展開する場合は0を指定
• background-image：線の色変更とtransparentで波の太さを調整
• backgrouns-size：波の幅と高さ調整
• backgrouns-position：背景の位置調整
• background-repeat：横のみの繰り返しはrepeat-xを指定

これらを調整して良い感じの波線を作ることができます。ただ、波線を表現しているのはlinear-gradientで、あくまで背景の上下を透明にしているだけなので、大きくするとぼやけて見えるのでその点はご注意ください！

最後に

波線は基本的にカンプから画像をスライスしたりCanvasやSVGで使うことが多いですが、CSSでもそれっぽいのは表現できることがわかりました。ただ、実際に表示して輪郭の明瞭さを見てみると、画像やSVG等には遠く及ばないので、用途は限られそうです。テキストに波線を引いたり、区切りや単色の背景であれば使いやすいと思いますので、ご活用いただければ幸いです！

以上、CSSで波線の背景の作り方のご紹介でした！