JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

<div class="test"></div>

CSS

.test {
  margin: 25px 0;
  width: 155px;
  height: 155px;
  border-radius: 50%;
  border: 2px solid transparent;
  background-size: 100% 100%, 40% 53%, 55% 50%, 53% 50%, 50% 43%;
  background-repeat: no-repeat;
  background-image: linear-gradient(white, white), 
                    linear-gradient(30deg, red 36%, red 30%),
                    linear-gradient(120deg, green 36%, green 30%),
                    linear-gradient(300deg, red 36%, red 30%),
                    linear-gradient(100deg, red 16%, red 10%);
  background-position: center center, left top, right top, left bottom, right bottom;
  background-origin: content-box, border-box, border-box, border-box, border-box;
  background-clip: content-box, border-box, border-box, border-box, border-box;
  transform: rotate(80deg);