CSS - 円グラフのアイコン

HTMLとCSSを使用してシンプルな半円のアイコンを描画する方法のコード例です。

HTMLコードは円グラフのアイコンを描画する要素となる<div>タグのクラス名 "pie-chart-icon" を設定しています。
枠と3つの半円のために<div>タグを設置しています。

<div class="pie-chart-icon">
	<div></div><div></div><div></div><div></div>
</div>

CSSカスタムプロパティで基準値とする図形の横幅「--w」を指定しています。
コード例では4分の1サイズの半円をz-indexで重ねています。

/* 円グラフアイコン */
.pie-chart-icon {
	--w: 300px; /* 基準サイズ */
	position: relative;
	width: var(--w);
	height: var(--w);
}

/* Body */
.pie-chart-icon div:nth-child(1) {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 95%;
	height: 95%;
	border-radius: 50%;
	background-color: #4169e1;
}

/* A */
.pie-chart-icon div:nth-child(2) {
	position: absolute;
	top: 5%;
	left: 5%;
	transform: translate(-50%, -50%);
	border: solid #dc143c;
	border-width: calc(var(--w) * 0.45) calc(var(--w) * 0.45) 0 0;
	border-radius: calc(var(--w) * 0.45) 0 0 0;
	transform-origin: right bottom;
	transform: rotate(90deg);
	z-index: 3;
}

/* B */
.pie-chart-icon div:nth-child(3) {
	position: absolute;
	top: 5%;
	left: 5%;
	transform: translate(-50%, -50%);
	border: solid #ff7f50;
	border-width: calc(var(--w) * 0.45) calc(var(--w) * 0.45) 0 0;
	border-radius: calc(var(--w) * 0.45) 0 0 0;
	transform-origin: right bottom;
	transform: rotate(170deg);
	z-index: 2;
}

/* C */
.pie-chart-icon div:nth-child(4) {
	position: absolute;
	top: 5%;
	left: 5%;
	transform: translate(-50%, -50%);
	border: solid #ffa07a;
	border-width: calc(var(--w) * 0.45) calc(var(--w) * 0.45) 0 0;
	border-radius: calc(var(--w) * 0.45) 0 0 0;
	transform-origin: right bottom;
	transform: rotate(230deg);
}