3

Note: I am not using any SVG.

I have a circle and each border has there owned text and color.

Note: I am not using any plugin. It's just a static circle with text.

It is possible to make this using HTML and CSS? If Yes then please give me some hit from where to start this.

enter image description here

.circle-donut{
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border-top: 140px solid #52e291;
  border-bottom: 140px solid #3400fe;
  border-right: 140px solid #ff7d36;
  border-left: 140px solid #faff08;
}
<div class="circle-donut"></div>

With position absolute

.wrap {
  position: relative;
}

.circle-donut {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border-top: 140px solid #a3fe01;
  border-bottom: 140px solid #2800eb;
  border-right: 140px solid #dd6479;
  border-left: 140px solid #ead52c;
}

ul {
  position: relative;
}

ul li {
  position: absolute;
}

ul li.top {
  top: 0;
}

ul li.bottom {
  bottom: 0;
}

ul li.left {
  left: 0;
}

ul li.right {
  right: 0;
}
<div class="wrap">
  <div class="circle-donut">

  </div>

  <ul>
    <li class="top">Come content one</li>
    <li class="right">Come content Two</li>
    <li class="bottom">Come content Three</li>
    <li class="left">Come content Four</li>
  </ul>
</div>
user9437856
  • 2,360
  • 2
  • 33
  • 92
  • You do pretty well. :) – Rayees AC Sep 15 '20 at 10:49
  • 2
    If the page is static and you *only* want to create this, then it can be done with position absolute elements – Alexandre Elshobokshy Sep 15 '20 at 10:50
  • @RayeesAC, I have to display the text also. So where I have to add text? – user9437856 Sep 15 '20 at 10:50
  • 1
    Add text by absolute positioning to achieve this. – Rayees AC Sep 15 '20 at 10:51
  • My question if a little bit different, I don't want to use any SVG. I just want to circle along with text – user9437856 Sep 15 '20 at 10:53
  • @IslamElshobokshy, I added one more example in the question with absolute – user9437856 Sep 15 '20 at 11:01
  • Ahh, I was busy with my answer. another way would be to create each piece of the circle and assign it to a div and then you can add text within the div and have a bit more control over your text (responsive, add different fonts, etc) this way doesn't matter, where your circle is the text of each piece, will be correctly aligned. And you can then assign some sweet on hover effects on each piece – Faziki Sep 15 '20 at 11:11

0 Answers0