JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

ul
    {
      position: absolute;
      list-style: none;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      color: #fc2e5a;

    }
li:nth-child(1)
    {
      width: 0;
      height: 0;
#      background: RGBA(240, 210, 225, .7);
      position: absolute;
      left: 0;
      top: 0;
      transform: translate(-50%, -50%) rotate(36deg); 
#      transform-origin: 100% 100%;
      border-right: 100px solid transparent;
      border-bottom: 70px solid #fc2e5a;
      border-left: 100px solid transparent;
#      border-top: 70px solid #fc2e5a;
    }
li:nth-child(2)
    {
      width: 0;
      height: 0;
#      background: RGBA(240, 210, 225, .7);
      position: absolute;
      left: 0;
      top: 0;
      transform: translate(-50%, -50%) rotate(-36deg); 
#      transform-origin: 0 100%;
      border-right: 100px solid transparent;
      border-bottom: 70px solid #fc2e5a;
      border-left: 100px solid transparent;
#      border-top: 70px solid #fc2e5a;
    }
li:nth-child(3)
    {
      width: 0;
      height: 0;
#      background: RGBA(240, 210, 225, .7);
      position: absolute;
      left: 0;
      top: 0;
      transform: translate(calc(-50% - 3px), calc(-50% + 5px)) rotate(252deg); 
#      transform-origin: 100% 100%;
      border-right: 100px solid transparent;
      border-bottom: 70px solid #fc2e5a;
      border-left: 100px solid transparent;
#      border-top: 70px solid #fc2e5a;
    }/*
li:nth-child(4)
    {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #888;
      position: absolute;
      left: 0;
      top: 0;
      transform: translate(-50%, -50%); 
    }