JSFiddle - React, Tailwind, and code Playground

by johanthuresson

HTML

<div id="circle"></div>

CSS

#circle {
  width: 0;
  height: 0;
  border-bottom: 400px solid black;
  border-top: 400px solid black;
  border-left: 400px solid green;
  border-right: 400px solid red;
  -moz-border-radius: 400px; 
  -webkit-border-radius: 400px; 
  border-radius: 400px;
  position:relative;  
}
#circle:after{
   width: 200px;
   height: 200px;
  -moz-border-radius: 400px; 
  -webkit-border-radius: 400px; 
  border-radius: 400px;
  position:absolute;
    background-color:#ffffff;
    z-index:2;
    content:" ";
    top:-100px;
    left:-100px;
}