CSS - 虫眼鏡アイコン

HTMLとCSSを使用して虫眼鏡（サーチ）アイコンを描画する方法のコード例です。

このHTMLコードは虫眼鏡（サーチ）アイコンを描画する要素となる<div>タグのクラス名 "search-icon" を設定しています。

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

最初の子要素<div>では疑似要素「before」と「after」で上下のパーツを作成しています。

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

/* 虫眼鏡 */
.search-icon {
	--w: 300px; /* 基本サイズ */
	--angle: -40deg; /* 回転 */
	position: relative;
	width: var(--w);
	height: var(--w);
	transform: rotate(var(--angle));
}

/* 上部パーツ */
.search-icon::before {
	content: "";
	position: absolute;
	top: 5%;
	left: 15%;
	width: 70%;
	height: 70%;
	border: solid #00bfff calc(var(--w) * 0.15);
	border-radius: 50%;
	box-sizing: border-box;
	transform-origin: center bottom;
}

/* 下部パーツ */
.search-icon::after {
	content: "";
	position: absolute;
	top: 70%;
	left: 42.5%;
	width: 15%;
	height: 25%;
	background-color: #00bfff;
	transform-origin: center top;
}