ページの先頭へ
トップに戻る
2017年2月15日 Web制作

水平線(hrタグ)をCSSのみで斜めストライプに装飾する方法

主に話題の区切りで使われる<hr />ですが、デフォルトの状態だとただ線が引かれるだけで味気ないので、CSSを使って斜めストライプに装飾してみました。

Pure CSS Stripe Border

で、作ったものがこんな感じです。シンプルだけどお洒落でしょ?

See the Pen hr Stripe by Kuzlog (@Kuzlog) on CodePen.

CSSのコード量は割と少なめ。 グラデーションを使って斜めの線を作り、それを横に並べてストライプを表現しています。

linear-gradientの記述について

background:linear-gradientの部分を見て、単色のストライプなのになんで10%だけグラデーション化してるの?という疑問が沸いた人もいると思います。

たしかに、単色のストライプを作るだけなら以下の記述でOKのような気もしますが… このCSSの実行結果がこちら。

See the Pen hr Stripe by Kuzlog (@Kuzlog) on CodePen.

IEやFirefoxだと正しく表示されますが、Chrome等のChromiumベースのブラウザだと、角度が(-)45度以外の単色ストライプはめちゃくちゃジャギーが発生します。まぁそういう仕様だから仕方ないね。この対策として、transparent#888の間に10%のグラデーション領域を確保しているというわけです。

あとがき

簡単なコードで実装できる割には視覚効果の大きい装飾なので、hrタグをよく使うという方は是非参考にしてみてください。