CSS - Olympic Rings

Example code demonstrating how to draw Olympic rings using HTML and CSS.

This HTML code sets the class name 'olympic-mark' for the <div> element, which serves as the container for drawing the Olympic rings. It includes five child <div> elements, each representing one of the rings.

<div class="olympic-mark">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

Specifies the base size '--w' using CSS custom properties. '--w' represents the overall width, determining the sizes and positions of each element.

Uses the pseudo-class 'nth-child' to set colors and positions for the five elements representing the rings. Attempts to set sizes, positions, and color codes as close as possible to the basic Olympic rings.

/* Olympic Rings */
.olympic-mark {
	--w: 300px; /* Base width */
	position: relative;
	width: var(--w);
	height: calc(var(--w) / 2.5);
}

/* Ring */
.olympic-mark div {
	position: absolute;
	width: calc(var(--w) * 0.3);
	height: calc(var(--w) * 0.3);
	border: solid calc(var(--w) * 0.03) #FFF000;
	border-radius: 50%;
	box-sizing: border-box;
}

/* Individual color and position */
.olympic-mark div:nth-child(1) {
	border-color: #009FDA;
}

.olympic-mark div:nth-child(2) {
	top: 25%;
	left: 17.5%;
	border-color: #F4C300;
}

.olympic-mark div:nth-child(3) {
	left: 35%;
	border-color: #000000;
}

.olympic-mark div:nth-child(4) {
	top: 25%;
	left: 52.5%;
	border-color: #4CCD17;
}

.olympic-mark div:nth-child(5) {
	left: 70%;
	border-color: #FF3C00;
}