CSS - ドーナツ型

HTMLとCSSを使用してドーナツ型（リング型）を描画する方法のコード例です。

このHTMLコードはドーナツ型（リング型）を描画する要素となる<div>タグのクラス名 "donut-shaped" を設定しています。

<div class="donut-shaped"></div>

疑似要素「before」でドーナツ型（リング型）のドーナツ部分は「border」を利用しています。

.donut-shaped {
	--w: 200px; /* 基準サイズ */
	width: var(--w);
	height: var(--w);
	position: relative;
	border: solid #00fa9a calc(var(--w) * 0.2);
	border-radius: 50%;
	box-sizing: border-box;
}