CSS - 折れ線グラフのアイコン

HTMLとCSSを使用してシンプルな折れ線グラフのアイコンを描画する方法のコード例です。

HTMLコードは折れ線グラフのアイコンを描画する要素となる<div>タグのクラス名 "line-graph-icon" を設定しています。
枠とグラフの棒は<div>タグを設置しています。

<div class="line-graph-icon">
	<div></div><div></div><div></div><div></div>
</div>

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

グラフの棒の部分は中心点を開始位置に切り替えてrotate()プロパティで回転させています。

/* 折れ線グラフアイコン */
.line-graph-icon {
	--w: 300px; /* 基準サイズ */
	--color: #00fa9a; /* ベースカラー */
	position: relative;
	width: var(--w);
	height: var(--w);
}

/* 枠*/
.line-graph-icon div:nth-child(1) {
	position: absolute;
	top: 5%;
	left: 5%;
	width: 90%;
	height: 90%;
	border: solid calc(var(--w) * 0.08) var(--color);
	border-top: 0;
	border-right: 0;
	box-sizing: border-box;
}

/* 棒 A */
.line-graph-icon div:nth-child(2) {
	position: absolute;
	top: 25%;
	left: 20%;
	width: 4%;
	height: 45%;
	background: var(--color);
	transform-origin: center bottom;
	transform: rotate(25deg);
}

.line-graph-icon div:nth-child(2)::before {
	content: "";
	position: absolute;
	top: calc(var(--w) * 0.3);
	left: calc(var(--w) * (-0.05));
	width: calc(var(--w) * 0.15);
	height: calc(var(--w) * 0.15);
	background-color: var(--color);
	border-radius: 50%;
}

.line-graph-icon div:nth-child(2)::after {
	content: "";
	position: absolute;
	top: calc(var(--w) * (-0.02));
	left: calc(var(--w) * (-0.04));
	width: calc(var(--w) * 0.15);
	height: calc(var(--w) * 0.15);
	background-color: var(--color);
	border-radius: 50%;
}

/* 棒 B */
.line-graph-icon div:nth-child(3) {
	position: absolute;
	top: 30%;
	left: 38%;
	width: 4%;
	height: 40%;
	background: var(--color);
	transform-origin: center top;
	transform: rotate(-25deg);
}

.line-graph-icon div:nth-child(3)::before {
	content: "";
	position: absolute;
	top: calc(var(--w) * 0.3);
	left: calc(var(--w) * (-0.04));
	width: calc(var(--w) * 0.15);
	height: calc(var(--w) * 0.15);
	background-color: var(--color);
	transform-origin: center bottom;
	border-radius: 50%;
}

/* 棒 C */
.line-graph-icon div:nth-child(4) {
	position: absolute;
	top: 15px;
	left: 56%;
	width: 4%;
	height: 55%;
	background: var(--color);
	transform-origin: center bottom;
	transform: rotate(25deg);
}

.line-graph-icon div:nth-child(4)::after {
	content: "";
	position: absolute;
	top: calc(var(--w) * (-0.05));
	left: calc(var(--w) * (-0.04));
	width: calc(var(--w) * 0.15);
	height: calc(var(--w) * 0.15);
	background-color: var(--color);
	transform-origin: center bottom;
	border-radius: 50%;
}