[html]
  <fieldset class="ui-wheel-of-fortune" style="--_items: 12;">
      <ul  style="padding: 0;" data-itemCount="12">
          <li>Егор</li>
          <li>Михаил</li>
          <li>Евгений</li>
          <li>Никита</li>
          <li>Сергей</li>
          <li>Иван</li>
          <li>Владимир</li>
          <li>Игорь</li>
          <li>Севастьян</li>
          <li>Архангел</li>
          <li>Станислав</li>
          <li>Купон на твинкаaaaaaaaaaaaa</li>
      </ul>
      <button class="spin-button" type="button">КРУТИ</button>
  </fieldset>

<style>

:where(.ui-wheel-of-fortune) {
    all: unset;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    container-type: inline-size;
    direction: ltr;
    display: grid;
    position: relative;
    /*width: 100%;*/
    height: 400px;

    &::after {
        aspect-ratio: 1/cos(30deg);
        background-color: crimson;
        clip-path: polygon(50% 100%, 100% 0, 0 0);
        content: "";
        height: 4cqi;
        position: absolute;
        place-self: start center;
        scale: 1.4;
    }

    & > * {
        position: absolute;
    }

    .spin-button {
        aspect-ratio: 1 / 1;
        background: hsla(0, 0%, 100%, .8);
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        font-size: 3.3cqi;
        place-self: center;
        width: 20cqi;
        color: black;
    }

    ul {
        all: unset;
        clip-path: inset(0 0 0 0 round 50%);
        display: grid;
        inset: 0;
        place-content: center start;

        li:nth-child(odd) {
            background-color: #58b3d2;
        }

        li:nth-child(even) {
            background-color: #bedfe8;
        }

        li {
            align-content: center;
            aspect-ratio: 1 / calc(2 * tan(180deg / var(--_items)));
            /*background: hsl(calc(360deg / var(--_items) * calc(var(--_idx))), 100%, 75%);*/
            clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
            display: grid;
            font-size: 5cqi;
            grid-area: 1 / -1;
            padding-left: 1ch;
            rotate: calc(360deg / var(--_items) * calc(var(--_idx) - 1));
            transform-origin: center right;
            user-select: none;
            width: 50cqi;
            white-space: nowrap;

            &:nth-of-type(1) {
                --_idx: 1;
                margin-bottom: 0;
            }

            &:nth-of-type(2) {
                --_idx: 2;
                margin-bottom: 0;
            }

            &:nth-of-type(3) {
                --_idx: 3;
                margin-bottom: 0;
            }

            &:nth-of-type(4) {
                --_idx: 4;
                margin-bottom: 0;
            }

            &:nth-of-type(5) {
                --_idx: 5;
                margin-bottom: 0;
            }

            &:nth-of-type(6) {
                --_idx: 6;
                margin-bottom: 0;
            }

            &:nth-of-type(7) {
                --_idx: 7;
                margin-bottom: 0;
            }

            &:nth-of-type(8) {
                --_idx: 8;
                margin-bottom: 0;
            }

            &:nth-of-type(9) {
                --_idx: 9;
                margin-bottom: 0;
            }

            &:nth-of-type(10) {
                --_idx: 10;
                margin-bottom: 0;
            }

            &:nth-of-type(11) {
                --_idx: 11;
                margin-bottom: 0;
            }

            &:nth-of-type(12) {
                --_idx: 12;
                margin-bottom: 0;
            }
        }

        &[data-itemCount='1'] {
            li {
                aspect-ratio: 1/1;
                display: block;
                rotate: 0;
                clip-path: none;
                width: 100cqi;
            }
        }

        &[data-itemCount='2'] {
            li {
                height: 100cqi;
                clip-path: none;
            }
        }

        &[data-itemCount='3'] {
            li {
                aspect-ratio: 1 / 2;
                clip-path: polygon(-35% -100%, 100% 50%, 0% 145%);
            }
        }

    }
}

</style>
[/html]