CSSのborderで「＞」を作成
先週、以下のような記事が話題になっていました。
【CSS】borderを使って、三角形作るのはやめませんか？
要約すると、borderは三角形を作るためのものではなく、任意の三角形が作りにくいのでclip-pathを使用しましょうという記事です。
borderは三角形だけではなく「＞」を作成するのに使用されることもあります。
例えば以下のようにボタンにワンポイントとして「＞」と付けるなどです。
<button class="button-01">ボタンサンプル</button>
.button-01 {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
padding: 1em;
border: 1px solid #fff;
border-radius: 5px;
box-sizing: border-box;
background: #0d6efd;
color: #fff;
font-size: 1em;
cursor: pointer;
}
.button-01::after {
transform: rotate(45deg);
width: 5px;
height: 5px;
margin-left: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
box-sizing: content-box;
content: '';
}
しかし、三角形と同様に「＞」もborderは三角形を作るためのものではなく、任意の三角形が作りにくいです。
「＞」をSVGを使用して作成する
「＞」をborderではなくSVGを使用して作成する方法があります。
SVGはpolylineを使用すればいくつかの座標で繋がった一連の直線を生成できます。
そのため、以下のようにpolylineにpoints属性で座標を記載すれば「＞」をSVGで作成できます。
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewbox="0 0 10 10"> <polyline points="0,1 4.5,5 0,9" stroke="#0d6efd" stroke-width="2" fill="none" /> </svg>
あとはCSSの::afterでこのSVGを描画すれば完成です。
<button class="button-02">ボタンサンプル</button>
.button-02 {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
padding: 1em;
border: 1px solid #fff;
border-radius: 5px;
box-sizing: border-box;
background: #0d6efd;
color: #fff;
font-size: 1em;
cursor: pointer;
}
.button-02::after {
width: 10px;
height: 10px;
margin-left: 10px;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewbox='0 0 10 10'><polyline points='0,1 4.5,5 0,9' stroke='%23fff' stroke-width='2' fill='none' /></svg>") no-repeat;
content: "";
}
SVGであればborderと違って「Σ」のような複雑な形も簡単に描画できます。
<button class="button-03">ボタンサンプル</button>
.button-03 {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
padding: 1em;
border: 1px solid #fff;
border-radius: 5px;
box-sizing: border-box;
background: #0d6efd;
color: #fff;
font-size: 1em;
cursor: pointer;
}
.button-03::after {
width: 10px;
height: 10px;
margin-left: 10px;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewbox='0 0 10 10'><polyline points='9,1 0,1 5,4 1,7 9,7' stroke='%23fff' stroke-width='2' fill='none' /></svg>") no-repeat;
content: "";
}
