CSSで台形を描くサンプルコード
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などの値を変更して、好みの台形を描画できます。