CSS - Location icon

Code example for drawing a location icon shape using HTML and CSS.

This HTML code sets the class name "location-icon" for the <div> tag which will be the location icon element.

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

Creates a circular part with the ::before pseudo element and an inverted triangle with ::after.

Sets the --w CSS custom property for the reference width value for the shapes.
Uses calc() to compute all the values needed for the hexagon.

In the code example, different colors and transparency are applied to the upper and lower parts of the hexagon to facilitate the examination of each part's distinct shape.

.location-icon {
	--w: 300px; /* Base width */
	position: relative;
	width: var(--w);
	height: var(--w);
}

/* Circle */
.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.7; /* Transparency to view shape */
}

/* Inverted triangle below */
.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.7; /* Transparency to view shape */
}