CSS - 台形

HTMLとCSSで円形を描画するコード例です。

HTML要素には、台形の要素となる<div>タグにクラス名 "trapezoid" を設定しています。

<div class="trapezoid"></div>

「box-sizing: border-box」を指定することで「width」にて台形の幅、「border-bottom」にて台形の高さにする事ができます。

.trapezoid {
	--w: 300px; /* 基準サイズ */
	--angle: 0deg; /* 回転 */
	position: relative;
	width: var(--w);
	height: var(--w);
	transform: rotate(var(--angle));
}

.trapezoid::before {
	content: "";
	position: absolute;
	top: 0;
	left: 5%;
	width: 90%; /* 図形の幅 */
	height: 90%; /* 図形の幅 */
	border-bottom: calc(var(--w) / 2) solid silver; /* 台形の高さ */
	border-left: calc(var(--w) / 6) solid transparent; /* 左側下辺の伸び */
	border-right: calc(var(--w) / 6) solid transparent; /* 右側下辺の伸び */
	box-sizing: border-box;
}