Divide circle into 3 parts with vertical text inside each sector

user_8148052 0
Viewed 193

I need to draw this shape using CSS (without JS or SVG):

1

with these conditions:

  • Text should be in one position - absolutely vertically.
  • It something like a circle divided into 3 parts without an outer border.
  • Center should be empty (optional).

What I tried: fiddle. But it rotates text. Also, I tried to use rotate with translateY property but it compresses the text:

Bottom number

css-shapes sass css html
1 Answers

Try doing the borders and rotations on :after pseudo-elements instead of the li's

you can translate to get the empty center.

and then just position the text like this:

.circle {
  position: relative;
  padding: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  list-style: none;
  overflow: hidden;
}


li:after {
  content:"";
  overflow: hidden;
  position: absolute;
  top: -20%;
  right: -20%;
  width: 70%;
  height: 70%;
  transform-origin: 0% 100%;
  border-bottom: solid black 1px;
}

.text {
  position: absolute;
  width: 10px;
  height: 10px;
  margin-left: -5px;
}

li:first-child:after {
  transform: rotate(0deg) skewY(30deg) translate(5px);
}

li:first-child .text {
  top: 25%;
  left: 75%;
}

li:nth-child(2):after {
  transform: rotate(120deg) skewY(30deg) translate(5px);
}

li:nth-child(2) .text {
  top: 70%;
  left: 50%;
}

li:nth-child(3):after {
  transform: rotate(240deg) skewY(30deg) translate(5px);
}

li:nth-child(3) .text {
  top: 25%;
  left: 25%;
}
<ul class="circle">
  <li>
    <div class="text">1</div>
  </li>
  <li>
    <div class="text">2</div>
  </li>
  <li>
    <div class="text">3</div>
  </li>
</ul>

user_40237340
Related