画像のような矢印をCSSだけで表示する方法


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

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




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




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

