CSS - 五輪（オリンピック）マーク

HTMLとCSSを五輪（オリンピック）マークを描画する方法のコード例です。

このHTMLコードは五輪（オリンピック）マークを描画するコンテナ要素として<div>タグのクラス名 "olympic-mark" を設定しています。
5つの円となる子要素として<div>タグで5個設置しています。

<div class="olympic-mark">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

CSSカスタムプロパティにて基本サイズ「--w」を指定します。
「--w」は全体の幅となり、それにより各要素のサイズや位置を計算します。

擬似クラス「nth-child」を利用して5つの円となる要素に色と位置を指定しています。
サイズ、位置、色コードなど可能な限り基本の五輪マークに近いものを設定しています。

/* 五輪マーク */
.olympic-mark {
	--w: 300px; /* 基準サイズ */
	position: relative;
	width: var(--w);
	height: calc(var(--w) / 2.5);
}

/* 円 */
.olympic-mark div {
	position: absolute;
	width: calc(var(--w) * 0.3);
	height: calc(var(--w) * 0.3);
	border: solid calc(var(--w) * 0.03) #FFF000;
	border-radius: 50%;
	box-sizing: border-box;
}

/* 個別に色と位置を指定 */
.olympic-mark div:nth-child(1) {
	border-color: #009FDA;
}

.olympic-mark div:nth-child(2) {
	top: 25%;
	left: 17.5%;
	border-color: #F4C300;
}

.olympic-mark div:nth-child(3) {
	left: 35%;
	border-color: #000000;
}

.olympic-mark div:nth-child(4) {
	top: 25%;
	left: 52.5%;
	border-color: #4CCD17;
}

.olympic-mark div:nth-child(5) {
	left: 70%;
	border-color: #FF3C00;
}