html - Is it possible to position items around the circle? -

i trying make circle , put 3 equals part around it. saw image below in site, want 3 equals part , not four.

i want them (the parts) button. if click them refer page.

i tried lot without success. goal each button around circle refer page. possible html , css? , if yes, how?

using css:

one pure css way create shape use css skew transforms. since need click events on parts, better use separate elements instead of using pseudo-elements.

.outer {    position: relative;    height: 200px;    width: 200px;    border-radius: 50%;    border: 2px solid;    overflow: hidden;  }  .inner {    position: absolute;    height: 50%;    width: 50%;    top: calc(25% - 2px);    left: calc(25% - 2px);    border-radius: 50%;    background: yellowgreen;    border: 2px solid;  }  .part {    position: absolute;    height: 100%;    width: 100%;  }  .part:nth-child(2) {    top: -50%;    left: calc(-50% - 2px);    transform: skewy(-30deg);    transform-origin: right bottom;    background: red;    border: 2px solid;    }  .part:nth-child(3) {    top: -50%;    right: calc(-50% - 2px);    transform: skewy(30deg);    transform-origin: left bottom;    background: green;    border: 2px solid;  }  .part:nth-child(1) {    top: 0%;    left: 0%;    width: 100%;    background: yellow;  }  .part:hover {    background: chocolate;  }  .part:nth-child(1) p{    position: absolute;    top: 85%;    left: 50%;    transform: translatex(-50%) translatey(-100%);  }  .part:nth-child(2) p{    position: absolute;    top: 50%;    left: 55%;    transform: skewy(30deg);  }  .part:nth-child(3) p{    position: absolute;    top: 50%;    left: 30%;    transform: skewy(-30deg);  }

<div class='outer'>    <div class='part'><p>text</p></div>    <div class='part'><p>text</p></div>    <div class='part'><p>text</p></div>    <div class='inner'></div>  </div>

---

using svg:

i still recommend using svg creating such shapes because allows better control on circle , parts. co-ordinates path should set identifying points on circle. logic identify points on circle described in my answer here. uses trigonometry.

svg {    height: 30vw;    width: 30vw;  }  svg circle {    fill: transparent;    stroke: black;  }  path {    stroke: black;  }  #part1 {    fill: green;  }  #part2 {    fill: yellow;  }  #part3 {    fill: red;  }  #inner {    fill: yellowgreen;  }  #part1:hover,  #part2:hover,  #part3:hover {    fill: chocolate;  }

<svg viewbox='0 0 100 100'>    <defs>      <path d='m13.63,71 a42,42 0 0,1 50,8' id='path1' />      <path d='m50,8 a42,42 0 0,1 86.37,71' id='path2' />      <path d='m13.63,76 a42,42 0 0,0 86.37,76' id='path3' />    </defs>      <path d='m50,0 a50,50 0 0,0 7,75 l50,50z' id='part1' />  <!-- should use trignometry calculate points - angle = 30deg -->    <path d='m50,0 a50,50 0 0,1 93,75 l50,50z' id='part2' />  <!-- should use trignometry calculate points - angle = 300deg -->    <path d='m7,75 a50,50 0 0,0 93,75 l50,50z' id='part3' />  <!-- should use points calculated previous 2 paths -->    <circle cx='50' cy='50' r='40' id='inner' />        <text font-family="calibri" font-size="8" x="28">      <textpath xlink:href="#path1">        tab 1 text      </textpath>    </text>    <text font-family="calibri" font-size="8" x="28">      <textpath xlink:href="#path2">        tab 2 text      </textpath>    </text>      <text font-family="calibri" font-size="8" x="28">      <textpath xlink:href="#path3">        tab 3 text      </textpath>    </text>    </svg>