CSS | 台形(Trapezoid)の作り方

2021-06-17CSS 図形デザイン,CSS

CSSで台形を作る方法

CSSで台形の図形をborderを使って作成する方法と、clip-pathのpolygonを使って作成する方法の2通りを紹介しています。

台形の作り方

CSSのborderプロパティを使った台形の作り方です。

See the Pen CSS Trapezoid design (border) by yochans (@yochans) on CodePen.

HTMLは上辺が短い台形と上辺が長い台形の要素を作成しています。

<div class="container">
	<div class="trapezoid-border-1"></div>
	<div class="trapezoid-border-2"></div>
</div>

ひとつ目が、上辺が短い台形で、ふたつ目が上辺が長い台形のデザインになっています。

過去に紹介した別記事では、横幅はwidth + border-left + border-rightの合計値、heightを0でborder-bottomを高さとしていましたが、今回は「box-sizing: border-box」を指定することでwidth、heightをそのまま横幅・高さとすることが可能で、図形の中に要素を入れることも可能となっています。

.trapezoid-1 {
	width: 150px; /* 幅 */
	height: 100px;
	border-bottom: 100px solid #8ec6ff; /* 高さ */
	border-left: 25px solid transparent; /* 左側下辺の伸び */
	border-right: 25px solid transparent; /* 右側下辺の伸び */
	box-sizing: border-box;
}

.trapezoid-2 {
	width: 150px;/* 幅 */
	height: 100px;
	border-top: 100px solid #8ec6ff; /* 高さ */
	border-left: 25px solid transparent; /* 左側上辺の伸び */
	border-right: 25px solid transparent; /* 右側上辺の伸び */
	box-sizing: border-box;
}

台形の作り方(polygonバージョン)

clip-pathプロパティのpolygonを使った台形の作り方です。

See the Pen CSS Trapezoid design (border) by yochans (@yochans) on CodePen.

HTMLはborderを使った場合と同じく、上辺が短い台形と上辺が長い台形の要素を作成しています。

<div class="container">
	<div class="trapezoid-1"></div>
	<div class="trapezoid-2"></div>
</div>

clip-pathのpolygonは、パーセント指定で直線を描く事が可能で、色指定はbackground-colorで指定可能です。

サンプルでは左下(0, 100%)から左上、右上、右下と指定していっています。

.trapezoid-polygon-1 {
	width: 150px;
	height: 100px;
	background: #ffb7b7;
	clip-path: polygon(0% 100%, 17.5% 0%, 82.5% 0%, 100% 100%);
}

.trapezoid-polygon-2 {
	width: 150px;
	height: 100px;
	background: #ffb7b7;
	clip-path: polygon(17.5% 100%, 0% 0%, 100% 0%, 82.5% 100%);
}

borderを使った台形と同じサイズになるように指定しています。

2021-06-17CSS 図形デザイン,CSS

Posted by Yousuke.U