CSS - ロケーションアイコン

HTMLとCSSを使用してロケーションアイコンの形を描画する方法のコード例です。

このHTMLコードはロケーションアイコンを描画する要素となる<div>タグのクラス名 "location-icon" を設定しています。

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

疑似要素「before」で円形のパーツ、「after」で逆三角形のパーツを作成しています。

CSSカスタムプロパティで基準値とする図形の横幅「--w」を指定しています。
calc()を使ってロケーションアイコンに必要なすべての値を計算します。

また、コード例ではパーツ別の形状を確認する為にロケーションアイコン形の上部と下部で別の色を指定し透過処理をしています。

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

/* 円 */
.location-icon::before {
	content: "";
	position: absolute;
	top: calc(var(--w) * (-0.1));
	left: calc(var(--w) * 0.125);
	width: calc(var(--w) * 0.75);
	height: calc(var(--w) * 0.75);
	border: solid calc(var(--w)*0.20) #ff00ff;
	border-radius: 50%;
	box-sizing: border-box;
	opacity: 0.8; /* 形状を確認するための透過 */
}

/* 下側の逆三角形 */
.location-icon::after {
	content: "";
	position: absolute;
	top: calc(var(--w) * 0.46);
	left: calc(var(--w) * 0.170);
	border-bottom: calc(var(--w) * 0.52) solid #8a2be2;
	border-right: calc(var(--w) * 0.33) solid transparent;
	border-left: calc(var(--w) * 0.33) solid transparent;
	box-sizing: border-box;
	transform: rotate(180deg);
	opacity: 0.8; /* 形状を確認するための透過 */
}