CSS - マグネットアイコン

HTMLとCSSを使用してマグネット（磁石）アイコンを描画する方法のコード例です。

HTMLコードはマグネットアイコンを描画する要素となる<div>タグのクラス名 "magnet-icon" を設定しています。

<div class="magnet-icon"></div>

「border」プロパティでマグネットの半円の形状を作成。
「border-top」を「0」にする事で上部の直線のボーダーを無くしています。

疑似要素「before」「after」を利用して左右の赤と青のパーツを作成しています。

CSSカスタムプロパティで基準値とする図形の横幅「--w」を指定しています。
またカスタムプロパティ「--angle」を使ってアイコンを回転させる事が可能です。

/* マグネット */
.magnet-icon {
	--w: 200px; /* 基本サイズ */
	--angle: 0deg; /* 回転 */
	position: relative;
	width: var(--w);
	height: var(--w);
	border: solid calc(var(--w) * 0.25) #404040;
	border-radius: 0 0 50% 50%;
	border-top: 0;
	box-sizing: border-box;
}

/* 赤 */
.magnet-icon::before {
	content: "";
	position: absolute;
	left: -50%;
	width: calc(var(--w) * 0.25);
	height: calc(var(--w) * 0.25);
	background-color: #ff0000;
	box-sizing: border-box;
}

/* 青 */
.magnet-icon::after {
	content: "";
	position: absolute;
	left: 100%;
	width: calc(var(--w) * 0.25);
	height: calc(var(--w) * 0.25);
	background-color: #0000ff;
	box-sizing: border-box;
}