JSFiddle - React, Tailwind, and code Playground

by wasikuss

HTML

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

SCSS

$radius: 100px;
$colors: red, green, blue, yellow, black;
$items: 4;

.circle {
  width: 2 * $radius;
  height: 2 * $radius;
  position: relative;
  background: gray;
  overflow: hidden;
  position: relative;
  border-radius: 100%;
}

.triangle
{
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-top-width: 0;
  border-left-width: $radius;
  border-right-width: $radius;
  border-bottom-width: $radius;
  border-color: transparent;
  transform-origin: center 0;  
}

@for $i from 1 through $items
{
    .triangle:nth-child(#{$items}n+$i)
    {
        transform: rotate( 360 / $items * $i + "deg" );
        border-bottom-color: nth($colors, $i);
    }
}