PRE PAGE
HOME > HTML & CSS > HTMLとcssで作る(コーディングする)平行四辺形はコピペでできる
2022年05月23日

HTMLとcssで作る(コーディングする)平行四辺形はコピペでできる

実務で↓を作らないといけなくなりました。

画像でもできますが自分の勉強も兼ねてcssで作ることにしました。

3本の矢印を3つのブロックに分けて真ん中を起点にして左の平行四辺形と右の平行四辺形を合体させます。

平行四辺形を作らないといけないのですがただ斜めにするだけなら「transform: skewX();」を使います。

図形を↓にするときを考えます。

この時のコードは↓です。

今回の場合は↓のように平行四辺形の角度を変えないといけないです。

その場合は「transform: skewY();」を使います。

この時のコードは↓です。

これを使って左右に平行四辺形をflexboxで並べたブロックを3段作れば完成です。

●いいねをつけてもらえると励みになります。