実現したいこと
この画像のような回転した台形を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 }
該当のソースコード
特になし
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
上記コードのようにtransformで実装しましたが、なかなか、期待通りの台形の形になりません。
CSS
1transform: skew(-29deg, 30deg) rotate(-135deg);
skewやrotateの数値を変えてもなかなかうまくいきませんでした。
どなたか、詳しい方、この回転台形になるようにするにはどうしたらいいか、教えてください。
宜しくお願いいたします。
補足
特になし
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2024/03/20 23:16