台形をCSSで実現したい。

Question

実現したいこと

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

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

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

   .step__icon::before {
      content: "";
      display: inline-block;
      width: 40px;
      height: 45px;
      background-color: blue;
      transform: skew(-29deg, 30deg) rotate(-135deg);
    }

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

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

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

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

補足

特になし

Answer 1

こちらのように、borderを使用した実装が楽かもしれません。
実装後はrotateで回せば良いと思います。
参考: 【初心者向け】CSSだけで台形を描く方法（解説付き）｜スタッフブログ｜株式会社インソースマーケティングデザイン

Comments

[gksh7]

ご教示いただきまして、ありがとうございます。
おかげさまで、borderを使って、理想とする形にすることができました。

Answer 2

以下のように perspective 関連の設定をするのはいかがでしょうか。

.step__icon {
  perspective: 200px;
  perspective-origin: 5% 80%;
}
.step__icon::before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 45px;
  background-color: blue;
  transform: rotateZ(-15deg) rotateX(35deg);
}

Comments

[gksh7]

ご教示いただきまして、ありがとうございます。
今回は、borderを使って実装しましたが、perspectiveというのがあるのを初めて知りました。
勉強になりました。今後、何かの時に役立てたいと思います。