JSFiddle - React, Tailwind, and code Playground

by mikapon

HTML

<div style="position:relative;width: 200px;height: 200px;">
  <div class="base"></div>  
</div>
<div style="position:relative;width: 200px;height: 200px;">
  <div class="base2"></div>  
</div>

CSS

.base {
  clip: rect(0,100px,200px,0);
  width: 200px;
  height: 200px;
  background-color: blue; 
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 7.5em);
  top: calc(50% - 7.5em);
}

.base2 {
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
  width: 200px;
  height: 200px;
  background-color: blue; 
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 7.5em);
  top: calc(50% - 7.5em);
}