patternhtmlMinor

Drawing a circle with text in it using CSS

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

circlecsswithtextdrawingusing

Problem

I'm trying to draw a circle and put text in the circle. It'll be part of a UI I'm working on. I have it working and it looks the way I want, but I think there must be a better way to do it. Mainly, I don't like all the hard coded numbers and lining up everything by hand. What I'd love is a version that could easily scale to any size without having to change a lot of the top and left properties of all the text. Any ideas on how to improve this?

Fiddle

div.arcs {
    border: 50px solid red;
    display: inline-block;
    min-width: 14em;
    min-height: 14em;
    max-height: 14em;
    max-width: 14em;
    border-radius: 50%;
    border-top-color: rgb(109, 176, 65);
    border-bottom-color: rgb(167, 167, 167);
    border-left-color: rgb(255, 199, 45);
    border-right-color: rgb(104, 162, 219);
    box-shadow: 0 0 20px 5px #a0a0a0;
}

div.arcs > div {
    font-family: Calibri;
    font-size: 20pt;
    text-align: center;
    text-shadow: 1px 1px 3px #000000;
    color: #e0e0e0;
    position: relative;
    width: 8.45em;
    height: 1.5em;
    line-height: 1.35em;
}

div.arcs > div:hover {
    text-decoration: underline;
    cursor: pointer;
}

div.arcs > div.top {
    top: -1.55em;
}

div.arcs > div.left {
    transform: rotate(270deg);
    transform-origin: right top 0;
    left: -10em;
    top: -1.5em;
}

div.arcs > div.right {
    transform: rotate(90deg);
    transform-origin: left top 0;
    left: 10em;
    top: -3.1em;
}

div.arcs > div.bottom {
    top: 3.7em
}


  Text 1
  Text 4
  Text 2
  Text 3

Solution

Instead going against how the browser naturally renders elements, use it to your advantage.

div.arcs {
    border: 50px solid red;
    display: block;
    min-width: 14em;
    min-height: 14em;
    max-height: 14em;
    max-width: 14em;
    border-radius: 50%;
    border-top-color: rgb(109, 176, 65);
    border-bottom-color: rgb(167, 167, 167);
    border-left-color: rgb(255, 199, 45);
    border-right-color: rgb(104, 162, 219);
    box-shadow: 0 0 20px 5px #a0a0a0;
    position:relative; /*changed*/
}

div.arcs > div {
    font-family: Calibri;
    font-size: 20pt;
    text-align: center;
    text-shadow: 1px 1px 3px #000000;
    color: #e0e0e0;
    position: absolute; /*changed*/
    width: 100%; /*changed*/
    height: 1.5em;
    line-height: 1.35em;
}

div.arcs > div:hover {
    text-decoration: underline;
    cursor: pointer;
}

div.arcs > div.top {
    top: -45px; /*changed - against the size of the border*/
}

div.arcs > div.left {
    transform: rotate(270deg);
    transform-origin: right top 0;
    /*top:0;
    left:-45px; - remove */
}

div.arcs > div.right {
    transform: rotate(90deg);
    transform-origin: left top 0;
    /*left: 10em;
    top: -3.1em; - remove*/
}

div.arcs > div.bottom {
    bottom: -45px; /*changed - against the size of the border*/
}

Then just swop the two div's around:


    
        Text 1
        Text 2 
        Text 4      
        Text 3

This will allow you to change the size of the circle without having to adjust everything, however if you change the width of the border, you will need to change the line-height of the div and the bottom and top div absolute positioning, there is no way around that.

Code Snippets

div.arcs {
    border: 50px solid red;
    display: block;
    min-width: 14em;
    min-height: 14em;
    max-height: 14em;
    max-width: 14em;
    border-radius: 50%;
    border-top-color: rgb(109, 176, 65);
    border-bottom-color: rgb(167, 167, 167);
    border-left-color: rgb(255, 199, 45);
    border-right-color: rgb(104, 162, 219);
    box-shadow: 0 0 20px 5px #a0a0a0;
    position:relative; /*changed*/
}

div.arcs > div {
    font-family: Calibri;
    font-size: 20pt;
    text-align: center;
    text-shadow: 1px 1px 3px #000000;
    color: #e0e0e0;
    position: absolute; /*changed*/
    width: 100%; /*changed*/
    height: 1.5em;
    line-height: 1.35em;
}

div.arcs > div:hover {
    text-decoration: underline;
    cursor: pointer;
}

div.arcs > div.top {
    top: -45px; /*changed - against the size of the border*/
}

div.arcs > div.left {
    transform: rotate(270deg);
    transform-origin: right top 0;
    /*top:0;
    left:-45px; - remove */
}

div.arcs > div.right {
    transform: rotate(90deg);
    transform-origin: left top 0;
    /*left: 10em;
    top: -3.1em; - remove*/
}

div.arcs > div.bottom {
    bottom: -45px; /*changed - against the size of the border*/
}

<div style="width:20%; display:block; margin:0 auto;">
    <div class="arcs">
        <div class="top">Text 1</div>
        <div class="right">Text 2</div> <!-- swopped -->
        <div class="left">Text 4</div>  <!-- swopped -->    
        <div class="bottom">Text 3</div>
    </div>
</div>

Context

StackExchange Code Review Q#162566, answer score: 4

Revisions (0)

No revisions yet.