JSFiddle - React, Tailwind, and code Playground

by Anderson Carlos Woss

HTML

<div class="half-circle"></div>
<div class="half-circle 2x"></div>
<div class="half-circle 3x"></div>

CSS

.half-circle {
  --size: 100px;
  width: calc(var(--size) * 2);
  height: var(--size);
  border: 1px solid black;
  border-top-left-radius: calc(var(--size) * 2);
  border-top-right-radius: calc(var(--size) * 2);
}

.half-circle.2x {
  --size: calc(var(--size) * 2);
}

.half-circle.3x {
  --size: calc(var(--size) * 3);
}