JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<div class="piece">

<div class="circle2"></div>
<div class="circle"></div>

</div>

CSS

div.piece {
	position: relative;


.circle {
	position: absolute;
	--border-width: 8px;
	width: calc(200px - 2 * var(--border-width));
	height: calc(200px - 2 * var(--border-width));
	border-radius:50%;
	background-color: #ff0000;
	border: 8px solid hsl(300deg, 100%, 30%);
	top: 0;
	left: 0;
	transform: perspective(900px) rotateX(70deg);
}

.circle2 {
	position: absolute;
	left: -8px;
	top: 50
	content:"";
	width: 200px;
	height: 68px;
	border-bottom-left-radius:50%;
	border-bottom-right-radius:50%;
	background-color: #630463;
}
}