Written by Kasumi

CSSだけで台形を作る方法

CSSだけで台形を作成したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

実装サンプル

See the Pen
CSSで台形を作成する方法
by Kohei (@kouk05)
on CodePen.0

台形の実装サンプルです。

実装手順は以下の通りです。

CSSで台形を作成するプロパティ

.trapezoid {
  width: 100px;/*横幅*/
  border-bottom: 100px solid #857560;/*高さ*/
  border-left: 35px solid transparent;/*角度*/
  border-right: 35px solid transparent;/*角度*/
}

CSSで台形を作成するコード例です。

台形を作るの必要なプロパティはborderwidthだけになります。

widthで台形の横幅を指定。

border-bottomプロパティで台形の高さ・色を指定。

border-left、border-rightで台形左右の傾斜をpx指定します。

以上で実装完了です。

まとめ

CSSだけで台形を作る方法について紹介しました。

以上で解説を終わります。

目次

関連記事

HTMLCSS

HTMLで前のページ・次のページへ戻るリンクボタンを実装する方法

2022.06.30
718
HTMLCSS

justify-content: space-betweenで最後の横並び要素だけ中央に寄せる方法【CSS flexbox】

2022.10.03
707
HTMLCSS プログラミング

【簡単】htmlでpdfファイルを表示・ダウンロードする方法【表示されない場合の解決方法も伝授】

2022.03.23
4693
HTMLCSS プログラミング

【簡単CSS】ある要素位置までスクロールしたらその要素を固定する方法【JavaScript不要】

2022.03.27
2167