More than 3 years have passed since last update.

【初心者でもわかる】CSSで作れる波線は2種類

Posted at 2021-05-01

#どうも7noteです。CSSで作れる波線は2種類だけ

CSSで波線を再現する方法！
それは以下の2種類しかありません！

・text-decolation: wavy;
・波パーツ画像のループ表示

グラデーションを駆使して作っているものも見ましたが、実用性はあまりないかと。
また、SVGを使う事で波の背景を作る方法はあるようです。

1行で書くなら「`text-decolation: wavy;`」

style.css

p {
  text-decoration: #f00 wavy underline; /* 色,波線,線を引く場所を指定 */
}

テキストに波線を書く方法です。色や線を引く場所は変えれますが波線の曲がり具合や大きさは変更できません。

このような波のパーツ画像を用意し、繰り返し表示することで波線を再現します。

index.html

<p><span class="wave">波下線を引く</span></p>

style.css

.wave {
  padding-bottom: 5px;
  background: url(parts.png) repeat-x bottom left / auto 5px;
}

結果

インライン要素、もしくはインラインブロック要素に指定しましょう。

現状CSSだけでは上記の方法でしか波線を再現することはできません。
それっぽいものは作れるかもしれませんが実運用を考えると上記の2つの方法のどちらかを選ぶしかないと思います。
ただwavyもあまり美しい感じではないので、実質背景画像を使った方法1択ではないかなと思います。

SVGを使った方法が知りたい方はこちらから。