こんなことができるんだ!CSSのボーダーを破線や点線にするスタイルシートのテクニック
Post on:2020年8月25日
CSSのボーダーを破線や点線にするスタイルシートのテクニック・オンラインツールを紹介します。
ボーダーにborderを使用するのではなく、backgroundを細くして四辺に使用します。破線や点線の大きさや長さもカスタマイズでき、ボーダーを傾斜にしたり、フェードやアニメーションを与えることもできます。
More Control Over CSS Borders With background-image
CSSのボーダーを破線や点線にすることができます。
borderプロパティの値に、dashedやdottedがあることを知っている人もいるでしょう。例えば、下記のように記述します。
1 2 3 4 |
.box { border: 1px dashed black; border: 3px dotted red; } |
ただし、このCSSでは破線や点線の大きさや長さをコントロールできません。また、ボーダーに傾斜やフェードやアニメーションを与えることもできません。
しかし、いくつかのテクニックを使用することで、それが実現できます!
Amit Sheenが作成したDashed Border Generatorで簡単に実現できます。
See the Pen
Dashed Border Generator by Amit Sheen (@amitsheen)
on CodePen.
このテクニックのポイントは4つの背景(background)を使用することです。backgroundプロパティはカンマ区切りの値を取るため、4つの背景(上下左右に沿って1つずつ)を設定し、それらをボーダーのようにサイズ変更することで、borderプロパティの制約を解除することができます。
ジェネーターで自分好みのボーダーを簡単に作成できます。
1 2 3 4 5 6 |
.box { background-image: repeating-linear-gradient(-50deg, #f21c1c, #f21c1c 30px, transparent 30px, transparent 32px, #f21c1c 32px), repeating-linear-gradient(40deg, #f21c1c, #f21c1c 30px, transparent 30px, transparent 32px, #f21c1c 32px), repeating-linear-gradient(130deg, #f21c1c, #f21c1c 30px, transparent 30px, transparent 32px, #f21c1c 32px), repeating-linear-gradient(220deg, #f21c1c, #f21c1c 30px, transparent 30px, transparent 32px, #f21c1c 32px); background-size: 5px 100%, 100% 5px, 5px 100% , 100% 5px; background-position: 0 0, 0 0, 100% 0, 0 100%; background-repeat: no-repeat; } |
sponsors