主に話題の区切りで使われる<hr />ですが、デフォルトの状態だとただ線が引かれるだけで味気ないので、CSSを使って斜めストライプに装飾してみました。
で、作ったものがこんな感じです。シンプルだけどお洒落でしょ？
See the Pen hr Stripe by Kuzlog (@Kuzlog) on CodePen.
CSSのコード量は割と少なめ。
|
1 2 3 4 5 6 |
hr{ height: 12px; background: linear-gradient(-70deg,transparent 35%,#666 45%, #666 55%,transparent 65%); background-size: 8px 12px; border: none; } |
グラデーションを使って斜めの線を作り、それを横に並べてストライプを表現しています。
background:linear-gradientの部分を見て、単色のストライプなのになんで10%だけグラデーション化してるの？という疑問が沸いた人もいると思います。
たしかに、単色のストライプを作るだけなら以下の記述でOKのような気もしますが…
|
1 2 3 4 5 6 7 |
background: linear-gradient( -70deg, transparent 45%, #666 45%, #666 55%, transparent 55% ) |
このCSSの実行結果がこちら。
See the Pen hr Stripe by Kuzlog (@Kuzlog) on CodePen.
IEやFirefoxだと正しく表示されますが、Chrome等のChromiumベースのブラウザだと、角度が(-)45度以外の単色ストライプはめちゃくちゃジャギーが発生します。まぁそういう仕様だから仕方ないね。この対策として、transparentと#888の間に10%のグラデーション領域を確保しているというわけです。
簡単なコードで実装できる割には視覚効果の大きい装飾なので、hrタグをよく使うという方は是非参考にしてみてください。
