HOME > HTML & CSS > HTMLとcssで作る(コーディングをする)台形はコピペでできる

HTMLとcssで作る(コーディングをする)台形はコピペでできる

自分への備忘としてコーディングでのcssを使った台形の作成について記事を残します。

コードは↓です。

これで↓と表示されます。

10行目と11行目で高さを出しています。

11行目で台形の高さになりそうですが高さを指定していないので3行目のように台形の中に文言(テキスト)を入れても↓のように文言は台形の上に行きます。

14行目に「box-sizing:border-box」がありますがこれはpaddingとborderを幅と高さに含めるための記述で台形の中に文言(テキスト)を入れたい時に使った方がいいですがコーディングしている時は台形の中に文言を入れると思うので付けるべきです。

もしbox-sizing:border-boxを付けなくて文言を入れると↓になります。

9行目は台形の底辺の長さです。

12行目の25pxは台形の左の辺の傾き(↓の青)を表していて13行目の25px(↓の赤)は台形の右の辺の傾きを表していますがpxを大きくすると傾き具合が大きくなります。

これで台形の完成です。

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