CSS - 二重丸

HTMLとCSSを使用して二重丸の形を描画する方法のコード例です。

このHTMLコードは二重丸を描画する要素となる<div>タグのクラス名 "double-circle" を設定しています。

<div class="double-circle"></div>

疑似要素「before」「after」を使ってふたつの円形の枠線を指定しています。
枠線の太さは「border」の幅で変化します。

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

/* 外側の円 */
.double-circle::before {
	content: "";
	position: absolute;
	top: 5%;
	left: 5%;
	width: 90%;
	height: 90%;
	border: solid calc(var(--w) *0.07) #00fa9a;
	border-radius: 50%;
	box-sizing: border-box;
}

/* 内側の円 */
.double-circle::after {
	content: "";
	position: absolute;
	top: 15%;
	left: 15%;
	width: 70%;
	height: 70%;
	border: solid calc(var(--w) *0.07) #00fa9a;
	border-radius: 50%;
	box-sizing: border-box;
}