CSS - 無限マーク

無限マークの形状を作る為のHTML & CSSのコード例です。

このコード例のHTML要素には、無限マークの図形の要素にする<div>タグにクラス名 "infinity" を設定しています。

<div class="infinity"></div>

疑似要素の「before」と「after」を利用して無限マークとなる左右のパーツを作成しています。

コード例では「border-radius」プロパティで3点を丸めた形状を左右の端で重ねています。

左右のパーツには「position」プロパティで「absolute」を指定しており、「left」と「right」で位置を調節して重なるようにします。

.infinity {
	--w: 300px; /* 基準サイズ */
	position: relative;
	width: var(--w);
	height: var(--w);
}

.infinity::before {
	content: "";
	position: absolute;
	top: 25%;
	left: 2.5%;
	width: 45%;
	height: 45%;
	border: solid calc(var(--w) * 0.1) #ffa500;
	border-radius: 50% 50% 0 50%;
	transform: rotate(-45deg);
	box-sizing: border-box;
	opacity: 0.5;
}

.infinity::after {
	content: "";
	position: absolute;
	top: 25%;
	right: 2.5%;
	width: 45%;
	height: 45%;
	border: solid calc(var(--w) * 0.1) #ffa500;
	border-radius: 50% 50% 0 50%;
	box-sizing: border-box;
	transform:rotate(135deg);
}