89275


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

[![画像の説明をここに入力](https://i.stack.imgur.com/qaIrr.jpg)](https://i.stack.imgur.com/qaIrr.jpg)


CC BY-SA 4.0
2022-06-06T03:12:39.993
89249
2022-06-09T08:05:52.970
2022-06-06T04:43:45.447
3060
25636
question
css
画像のような矢印をCSSだけで表示する方法


画像の例は端点が微妙に丸くなってるようなので違うかもしれませんが、  
SVGのlineでやってみました。

[code]

    <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>
[/code]


CC BY-SA 4.0
2022-06-08T01:57:50.243
89275
2022-06-08T02:16:09.230
2022-06-08T02:16:09.230
43025
50767
89249
answer


「縦棒のCSSと斜めの棒を足すような」が分からないけど  
縦棒と横棒(？) でできるです (この場合太くすると見栄え良くないけど)

[code]

    .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);
    }
[/code]

[code]

    <div class="downarrow"></div>
[/code]


CC BY-SA 4.0
2022-06-09T08:05:52.970
89303
2022-06-09T08:05:52.970
43025
89249
answer