[GeorgieDev]

GeorgieDev,
может svg?

<div class='sectionsCircle'>
   <div class=rictangle>1</div>
   <div class=rictangle>2</div>
   <div class=rictangle>3</div>
   <div class=rictangle>4</div>
   <div class=rictangle>5</div>
   <div class=rictangle>6</div>
   <div class=rictangle>7</div>
</div>

.sectionsCircle {
    position: relative;
    height: 300px;
    width: 300px;
    background-color: black;
    opacity: .95;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
  }

  
  .rictagle{
    overflow: hidden;
    position: absolute;
    width: 150px;
    height: 150px;
    transform-origin: 0% 100%;
    background-color: blue;
    margin-left: 150px;
  }

Сделал таким образом, но первый элемент находится под вторым, и последним. Надо как-то менять z-index, но вопрос, как лучше? Или есть другие идеи. Буду рад услышать)