CSS 縦線で矢印を作るには？

Question

#実現したいデザイン

こう言った「縦線で矢印」のようなデザインは、どのようにして作れば良いでしょうか？

#試した事
CSSだけでスタイリッシュな下線付き矢印
こちらの記事を参考に、横向きの下線矢印はできました。
しかし、これを縦バージョンでやろうとすると、矢印では無くなってしまいます。。

cssはこんな感じ

.lineArrow02 {
    width: 25px;
    height: 200px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: skew(360deg);
    margin: 10px 50px 0 30px;
}

Answer 1

こんなんでどう?

-    transform: skew(360deg);
+    transform: skewY(135deg);

Comments

[Gento]

おおお！！！skewにはXとYがあったのですね！！
知らなかったです。。助かりました^ ^