点線や破線をbackgroundプロパティを使って表現する方法を紹介します。
borderプロパティで点線や破線を表現することもできますが、backgroundプロパティでは線の太さや位置の細かい調整をすることができます。
点線・破線
四角はlinear-gradient()を使用し、丸はradial-gradient()を使用して作成します。
.square {
height: 4px;
background-image: linear-gradient(to right, red 50%, transparent 50%);
background-size: 8px 100%;
}
.rectangle {
height: 3px;
background-image: linear-gradient(to right, cyan 8px, transparent 4px);
background-size: 12px 100%;
}
.circle {
height: 10px;
background-image: radial-gradient(circle, blue calc(100% / 2 - 1px), transparent calc(100% / 2));
background-size: 10px 100%;
}
.text-square {
width: fit-content;
padding-bottom: 5px;
background-image: linear-gradient(to right, red 50%, transparent 50%);
background-size: 6px 3px;
background-repeat: repeat-x;
background-position: left bottom;
}See the Pen Untitled by yoshi (@mikanbako) on CodePen.
背景ストライプ
background-imageにlinear-gradient()を4つ指定することでborderのような表現が可能です。
.border {
padding: 20px;
background-image: linear-gradient(to right, red 50%, transparent 50%), linear-gradient(to right, red 50%, transparent 50%), linear-gradient(to bottom, red 50%, transparent 50%), linear-gradient(to bottom, red 50%, transparent 50%);
background-size: 6px 3px, 6px 3px, 3px 6px, 3px 6px;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-position: left bottom, left top, left top, right top;
}
.stripe-1 {
padding: 20px;
background-image: linear-gradient(to right, #ccc 50%, transparent 50%);
background-size: 3px 3px;
}
.stripe-2 {
padding: 20px;
background-image: linear-gradient(to bottom, #ccc 50%, transparent 50%);
background-size: 3px 3px;
}
.stripe-3 {
padding: 20px;
background-image: linear-gradient(-45deg, transparent 25%, #ccc 25%, #ccc 50%, transparent 50%, transparent 75%, #ccc 75%, #ccc);
background-size: 4px 4px;
}See the Pen 背景ストライプ by yoshi (@mikanbako) on CodePen.
