台形をCSSで実現したい。

実現したいこと

この画像のような回転した台形をCSSで実現したい

発生している問題・分からないこと

HTML

1<div class="step__icon"></div>

CSS

1 .step__icon::before {2 content: "";3 display: inline-block;4 width: 40px;5 height: 45px;6 background-color: blue;7 transform: skew(-29deg, 30deg) rotate(-135deg);8 }

該当のソースコード

特になし

試したこと・調べたこと

上記の詳細・結果

上記コードのようにtransformで実装しましたが、なかなか、期待通りの台形の形になりません。

CSS

1transform: skew(-29deg, 30deg) rotate(-135deg);

skewやrotateの数値を変えてもなかなかうまくいきませんでした。
どなたか、詳しい方、この回転台形になるようにするにはどうしたらいいか、教えてください。
宜しくお願いいたします。

補足

特になし