Drawing a circle with text in it using CSS
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 &gt; 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 &gt; div:hover {
    text-decoration: underline;
    cursor: pointer;
}

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

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

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

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


Then just swop the two div's around:

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


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.