CSS - 表彰台

HTMLとCSSを使用して表彰台を描画する方法のコード例です。

HTMLコードは表彰台アイコンを描画する要素となる<div>タグのクラス名 "podium-icon" を設定しています。
1位、2位、3位の各パーツは子要素として<div>タグで設置しています。

<div class="podium">
	<div>1</div><div>2</div><div>3</div>
</div>

CSSカスタムプロパティで基準値とする図形の横幅「--w」を指定しています。

各パーツは一括指定したのち、nth-child()を利用して個別指定、サイズと位置を調節しています。

パーツ上部の白い横棒は「border-top」プロパティで編集可能です。

/* 表彰台 */
.podium {
	--w: 300px; /* 基本サイズ */
	position: relative;
	width: var(--w);
	height: var(--w);
}

/* 台 */
.podium div {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	position: absolute;
	bottom: 25%;
	border-top: solid 5px #fff;
	font-size: calc(var(--w) * 0.15);
	font-weight: bold;
	color: #FFF;
}

/* 1 */
.podium div:nth-child(1) {
	left: 50%;
	transform: translateX(-50%);
	width: 33%;
	height: 35%;
	background-color: #00e673;
	z-index: 2;
}

/* 2 */
.podium div:nth-child(2) {
	left: 5%;
	width: 30%;
	height: 30%;
	background-color: #4169e1;
}

/* 3 */
.podium div:nth-child(3) {
	right: 5%;
	width: 30%;
	height: 25%;
	background-color: #ff7f50;
}