CSSで台形を描くサンプルコード

2023-04-22

CSSで台形を描く方法はいくつかありますが、ここではclip-pathを使った方法を紹介します。このサンプルコードは、HTMLとCSSで構成されています。

まず、HTMLファイルに台形を表示する要素を作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>台形の描画</title>
	<link rel="stylesheet" href="styles.css">
</head>
<body>
	<div class="trapezoid"></div>
</body>
</html>

次に、CSSファイル（styles.css）で台形のスタイルを設定します。

.trapezoid {
	width: 150px;
	height: 100px;
	background-color: #3498db;
	clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

このサンプルコードでは、clip-pathプロパティを使って、台形の形状を定義しています。polygon関数で点を指定し、それらの点を結んで形状を作成します。この場合、左上が20%、右上が80%、右下が100%、左下が0%の位置にある点を結んで台形を作成しています。

widthとheightプロパティで台形のサイズを調整し、background-colorプロパティで台形の色を設定しています。必要に応じてこれらの値を変更して、好みの台形を描画できます。

clip-pathを使わない方法

clip-pathを使わずに、CSSで台形を描く方法として、::beforeや::after疑似要素とtransformプロパティを用いた方法があります。ここでは、::beforeと::after疑似要素を使って、2つの三角形と長方形を組み合わせて台形を描画します。

HTMLファイルは次のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>台形の描画</title>
	<link rel="stylesheet" href="styles.css">
</head>
<body>
	<div class="trapezoid"></div>
</body>
</html>

CSSファイル（styles.css）では次のようにスタイルを設定します。

.trapezoid {
	position: relative;
	width: 100px;
	height: 50px;
	background-color: #3498db;
	margin: 50px;
}

.trapezoid::before,
.trapezoid::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	z-index: -1;
}

.trapezoid::before {
	top: 0;
	left: 0;
	border-width: 0 25px 50px 0;
	border-color: transparent #3498db transparent transparent;
}

.trapezoid::after {
	top: 0;
	right: 0;
	border-width: 0 0 50px 25px;
	border-color: transparent transparent transparent #3498db;
}

このサンプルコードでは、::beforeと::after疑似要素を使って、左側と右側の三角形を作成しています。三角形は、borderプロパティを利用したテクニックで作成しています。三角形の大きさや位置は、border-widthプロパティやtop、left、rightプロパティで調整できます。

長方形部分は、.trapezoidクラスの要素で表現されており、background-colorプロパティで色を設定しています。

これにより、2つの三角形と長方形が組み合わさり、台形が描画されます。必要に応じて、width、height、border-widthなどの値を変更して、好みの台形を描画できます。