CSSでこのような矢印を作成するには、縦棒のCSSと斜めの棒を足すようなCSSを書けばできるのでしょうか?
2 件の回答
画像の例は端点が微妙に丸くなってるようなので違うかもしれませんが、
SVGのlineでやってみました。
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="10" x2="10" y1="10" y2="150" stroke="gray" stroke-width="3"/>
<line x1="3" x2="10" y1="130" y2="150" stroke="gray" stroke-width="3"/>
</svg>
「縦棒のCSSと斜めの棒を足すような」が分からないけど
縦棒と横棒(?) でできるです (この場合太くすると見栄え良くないけど)
.downarrow {
display: inline-flex;
transform: rotate(90deg);
}
.downarrow::after {
content: '';
width: 200px;
height: 20px;
border-top: solid thin green;
border-right: solid thin green;
transform: skew(-45deg);
}
<div class="downarrow"></div>