From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,400 courses taught by industry experts.

Creating a pie chart

Creating a pie chart - CSS Tutorial

From the course: CSS Shorts

Creating a pie chart

- [Instructor] Hi, this is Chris Converse, and in this episode we'll create a pie chart using only HTML and CSS, by combining the clip and border radius properties, in order to create the wedge shapes. So, if you'd like to follow along with me, download the exercise files, and I'll begin by opening the HTML and CSS files in a text editor. Now for this project, we're going to set most of the CSS in a separate CSS file. In the HTML file, we're going to set a couple of properties that are going to relate specifically to the data. This way, if you want to change the data, you can change that information in the HTML and if you want to change the style, we can change it in the CSS. Now, in my text editor, I have this set up to take up the left-hand side of the screen, with the top area showing the HTML and the bottom area showing the CSS. And on the right-hand side, I have the design, showing in a browser. And so, we're going to start by taking a look at some of the HTML that I've already…

Contents