Draw a Semi Circle in Css

Read Time: 7 mins Languages:

Although HTML5 Canvas and SVG might be more elegant solutions for edifice charts, in this tutorial we'll learn how to build our very own donut chart with nothing but plain CSS.

To get an thought of what nosotros'll exist creating, have a look at the embedded CodePen demo below:

HTML Markup

Nosotros start with some very basic markup; a plain unordered list with a span element inside each of the list items:

<ul class="chart-skills">   <li>     <span>CSS</span>   </li>   <li>     <span>HTML</span>   </li>   <li>     <span>PHP</span>   </li>   <li>     <span>Python</bridge>   </li> </ul>

Adding Styles to the List

With the markup ready, showtime we utilise some bones styles to the unordered list:

.chart-skills {   position: relative;   width: 350px;   height: 175px; }

Then, we're going to requite each one an ::subsequently and a ::earlier pseudo-chemical element, and style them:

.nautical chart-skills::before, .chart-skills::afterwards {   position: absolute; }  .chart-skills::before {   content: '';   width: inherit;   height: inherit;   border: 45px solid rgba(211,211,211,.3);   border-bottom: none;   border-elevation-left-radius: 175px;   border-peak-right-radius: 175px; }  .chart-skills::later on {   content: 'Top Skills';   left: l%;   bottom: 10px;   transform: translateX(-50%);   font-size: 1.1rem;   font-weight: bold;   color: cadetblue; }

Pay attention to the styles for the ::before pseudo-element. This gives us our half circle.

Pseudo elements

So far, the aforementioned rules give u.s. this event:

Adding Styles to the List Items

Let's now hash out the styling of the list items.

Positioning

With regards to the list items' position, we do the following:

• Position them right underneath their parent and
• give them appropriate styles then as to create a contrary half circle.

Furthermore, a couple of things are worth noting here:

• The list items are absolutely positioned, thus we're able to gear up their z-alphabetize belongings.
• We change the default transform-origin holding value (i.e.transform-origin: 50% 50%) of the list items. Specifically, we set transform-origin: 50% 0. In this mode, when we animate (rotate) the items, their center top corner will become the center of rotation.

Here are the associated CSS styles:

.chart-skills li {   position: absolute;   superlative: 100%;   left: 0;   width: inherit;   peak: inherit;   border: 45px solid;   border-meridian: none;   border-bottom-left-radius: 175px;   edge-lesser-right-radius: 175px;   transform-origin: 50% 0; }  .nautical chart-skills li:nth-child(1) {   z-index: 4;   border-color: dark-green; }  .nautical chart-skills li:nth-child(2) {   z-index: 3;   edge-color: firebrick; }  .chart-skills li:nth-kid(3) {   z-alphabetize: 2;   border-colour: steelblue; }  .nautical chart-skills li:nth-kid(4) {   z-index: 1;   edge-color: orange; }

Have a wait at what we've congenital so far in the next visualization:

spans and listing items

Currently, the just list item which is visible is the greenish one (which has z-index: iv;) the others are underneath information technology.

Animations

Before we encompass the steps for animating our list items, allow'south take note of the desired percentage for each item (ie: how much of the donut each will encompass). Consider the following table:

Language	Percentage
CSS	12
HTML	32
PHP	34
Python	22

Next, nosotros calculate how many degrees nosotros have to animate (rotate) each of the items. To find out the exact number of degrees for each item, we multiply its percentage past 180° (non 360° considering we're using a semi-circle donut chart):

Language	Percentage	Number of Degrees
CSS	12	12/100 * 180 = 21.half dozen
HTML	32	32/100 * 180 = 57.half-dozen
PHP	34	34/100 * 180 = 61.2
Python	22	22/100 * 180 = 39.6

At this point nosotros're set up to set upward the animations. First, nosotros ascertain some animation styles that are shared beyond all items, past adding some rules to.chart-skills li:

          animation-fill-style: forwards;   animation-duration: .4s;   blitheness-timing-function: linear;        

Then, we define the unique animation styles:

.chart-skills li:nth-kid(1) {   z-alphabetize: four;   border-colour: green;   animation-name: rotate-ane; }  .chart-skills li:nth-child(2) {   z-index: 3;   border-color: firebrick;   animation-proper noun: rotate-two;   blitheness-filibuster: .4s; }  .chart-skills li:nth-child(3) {   z-index: 2;   border-color: steelblue;   blitheness-proper noun: rotate-three;   animation-delay: .8s; }  .chart-skills li:nth-child(iv) {   z-index: 1;   border-color: orange;   animation-name: rotate-4;   animation-delay: ane.2s; }

Discover that we add together a delay to all items except for the first 1. In this way, nosotros create nice sequential animations. For example, when the blitheness of the kickoff element finishes, the 2d element appears, and so on.

The adjacent step is to specify the actual animations:

@keyframes rotate-i {   100% {     transform: rotate(21.6deg);     /**      * 12% => 21.6deg      */   } }  @keyframes rotate-2 {   0% {     transform: rotate(21.6deg);   }   100% {     transform: rotate(79.2deg);     /**      * 32% => 57.6deg       * 57.half dozen + 21.six => 79.2deg      */   } }  @keyframes rotate-3 {   0% {     transform: rotate(79.2deg);   }   100% {     transform: rotate(140.4deg);     /**      * 34% => 61.2deg       * 61.2 + 79.2 => 140.4deg      */   } }  @keyframes rotate-4 {   0% {     transform: rotate(140.4deg);   }   100% {     transform: rotate(180deg);     /**      * 22% => 39.6deg        * 140.4 + 39.six => 180deg      */   } }

Before going whatever further, we'll briefly await at how the animations work:

The outset element goes from transform: none to transform: rotate(21.6deg).

The second element goes from transform: rotate(21.6deg)  (starts from the final position of the first chemical element) to transform: rotate(79.2deg) (57.6deg + 21.6deg).

The third element goes fromtransform: rotate(79.2deg)  (starts from the last position of the second element) totransform: rotate(140.4deg) (61.2deg + 79.2deg).

The fourth element goes fromtransform: rotate(140.4deg)  (starts from the terminal position of the third element) totransform: rotate(180deg) (140.4deg + 39.6deg).

Hide!

Last only not least, to hide the bottom one-half of the chart, we take to add the following rules:

.chart-skills {     /* existing rules....*/            overflow: hidden; }  .chart-skills li {     /* existing rules....*/          transform-style: preserve-3d;     backface-visibility: subconscious; }

The overflow: hidden property value ensures that only the get-go semi-circle (the one created with the ::before pseudo-chemical element) is visible. Feel free to remove that property if yous want to test the initial position of the listing items.

Thetransform-style: preserve-3d and backface-visibility: subconscious properties preclude flickering furnishings that may occur in dissimilar browsers due to animations. If this problem withal exists in your browser, you may desire to effort these solutions as well.

The chart is most ready! All that remains is to style the chart labels, which we'll do in the next section.

Hither'due south the CodePen demo showing the electric current appearance of our nautical chart:

Calculation Styles to the Labels

In this section, we'll fashion the chart labels.

Positioning

With regards to their position, we exercise the following:

• Give them position: accented and use the top and left properties to gear up their desired position.
• Apply negative values to rotate them. Of course, these aren't random values. In fact, these are extracted from the final frame of their parent item. For case, the terminal frame of the second listing detail includes transform: rotate(79.2deg), and thus its related label will accept transform: rotate(-79.2deg).

Below are the corresponding CSS styles:

.chart-skills span {   position: absolute;   font-size: .85rem; }  .chart-skills li:nth-child(1) span {   top: 5px;   left: 10px;   transform: rotate(-21.6deg); }  .chart-skills li:nth-child(2) span {   top: 20px;   left: 10px;   transform: rotate(-79.2deg); }  .chart-skills li:nth-child(3) span {   peak: 18px;   left: 10px;   transform: rotate(-140.4deg); }  .nautical chart-skills li:nth-child(4) bridge {   top: 10px;   left: 10px;   transform: rotate(-180deg); }

Animations

Now that we've positioned the labels, it'due south time to breathing them. Two things are worth mentioning here:

• By default, all labels are hidden and become visible every bit their parent item is being blithe.
• Similarly to the parent items, we use the animation-delay property to create sequential animations. In addition, we add the backface-visibility: hidden property value to ensure that there aren't whatever flickering furnishings due to animations.

The CSS rules that bargain with the blitheness of the chart labels are shown below:

.nautical chart-skills span {   backface-visibility: subconscious;   animation: fade-in .4s linear frontwards; }  .nautical chart-skills li:nth-child(2) span {   animation-filibuster: .4s; }  .nautical chart-skills li:nth-child(3) span {   blitheness-delay: .8s; }  .nautical chart-skills li:nth-child(four) span {   animation-delay: 1.2s; }  @keyframes fade-in {   0%,   90% {     opacity: 0;   }   100% {     opacity: 1;   } }

Here's the last chart:

Browser Support & Problems

In general, the demo works well in all browsers. I just want to discuss two pocket-size problems that are related to the edge-radius holding.

First, if we were to give different colors to our items, the nautical chart might wait something like this:

Notice for example the summit and bottom corners of the third detail. There are ii red lines which come from the border colour of the quaternary item. We tin run into those lines because the fourth item has a darker border color compared to the third one. Although this is a modest issue, it's expert to exist aware of it in order to cull advisable colors for your ain charts.

Secondly, in Safari the chart appears as follows:

Look at the small-scale gaps appearing in the 2nd and third items. If you lot know annihilation regarding this upshot, let us know in the comments below!

Conclusion

In this tutorial, we went through the process of creating a semi-circle donut chart with pure CSS. Again, as mentioned in the introduction, there are potentially more powerful solutions (due east.g. HTML5 Sail and SVG) out in that location for creating these kind of things. However, if y'all want to build something elementary and lightweight, and enjoy a challenge, CSS is the style to go!

Did yous notice this post useful?

George Martsoukos

George is a freelance web programmer and an enthusiast writer for some of the largest web evolution magazines in the earth (Tuts+, SitePoint, LottieFiles, Scotch, Awwwards). He loves anything related to the Web and he is addicted to learning new technologies every twenty-four hour period.

robinsondereter.blogspot.com

Source: https://webdesign.tutsplus.com/tutorials/how-to-build-a-css-only-semi-circle-donut-chart--cms-26997

Share this post