0

CSSでこのような矢印を作成するには、縦棒のCSSと斜めの棒を足すようなCSSを書けばできるのでしょうか?

画像の説明をここに入力

2 件の回答 2

0

画像の例は端点が微妙に丸くなってるようなので違うかもしれませんが、
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>

0

「縦棒の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>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。