- [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 set up.
So we have a figure element within our body.
Inside of the figure element, I have a div,
with a class of pie chart,
and inside of that div, I have another div
with a class of base.
So right now, I have instyled the appearance of that,
so right now, we just see a blank box in the preview.
So over in the CSS, let's scroll down.
At the very bottom, I have a selector
that's targeting the div with the class of pie chart,
up here.
And the first thing I want to do is
make all of the divs inside of the pie chart class
into circles.
So we'll start by typing ".piechart,"
then a space, then "div," put in our brackets.
Inside, we're going to set a width property.
We're going to set the width to inherit.
This way, the width of the divs
will always conform to the size we set here
in the piechart.
So if we ever want to change the size,
we only change it in one spot.
Next, let's set a height property.
We're going to set this to inherit as well.
Down the next line, we're going to set a position property.
We're going to set this to absolute.
Next, we'll set a top property.
Set that to 0 pixels.
We'll also set a left property.
We'll set that to 0 pixels.
And then finally, we'll set a border radius,
and we're going to set that to 50%.
So with those properties set up,
we're going to scroll down a little bit.
Now I'm going to target the div with the class of base.
So we'll start with .piechart .base,
put in our brackets
and then we'll set a background color.
We use the RGBA color space.
Let's come in here and set 255 for red,
comma, 255 for green, comma, 255 for blue,
and then to make this semi-transparent,
we'll set this to 0.3.
With those in place, save your CSS
and we'll now see in the browser,
we have a semi-transparent white circle.
And now, to create our first wedge,
we're going to need some additional divs in the HTML file.
So up here in the HTML,
after the div with the class of base,
let's hit a Return.
Let's add another div, then a space.
We'll set a class of slice,
then we'll end the div, and the element.
Let's split this div open,
and then inside of this div,
we're going to add another div.
So beginning tag and then ending tag.
And now as I mentioned before,
we're going to want to set some of our CSS properties
within the HTML file,
so that we can change our content later,
and one of those properties is going to be
the color of the slices.
So let's go back into the opening tag
for the div we just created.
Let's hit a space, let's add a style attribute.
So, style equals, two quotes.
Let's come in here and set a background color.
So background-color:#fff, for white,
and then a semi-colon.
Save your HTML and we'll now see in the browser
that div element is a full white circle.
So now let's conform this to a half circle
so that we can create wedge shapes
by adding some additional CSS properties in the CSS file.
So back in our CSS file,
let's type .piechart, then a space,
then we'll target the slice class,
so we'll type .slice,
then a comma, we're going to add a second selector
to this CSS rule.
Then on the next line, we'll type .piechart again,
then a space, .slice,
then a space, then div,
put in our curly brackets,
let's split this open.
We're going to set a top property here of 0 pixels as well.
Left property, 0 pixels.
Then we're going to come down here and set a clip property.
So we'll type clip, colon, space,
then we'll type rectangle,
and that's abbreviated as rect,
put in our parentheses, then a semi-colon.
Inside of the parentheses, we use short-hand style
to clip our circle,
so we'll start with 0 pixels, which is the top,
then 90 pixels for the right, comma, space,
180 pixels for the bottom, comma, space,
and then 0 pixels for the left.
So when you have those properties in place,
save your CSS, go back to the browser
and our full white circle is now being clipped
into a half circle.
So now, with our half circle in place,
we're going to need to set up some rotation properties,
using degrees to represent our data,
and the first thing we'll need to do
is figure out how many degrees of a circle
represent our data,
and we want this pie chart to represent 75%,
so what we'll do is represent 75% as a decimal,
which will be 0.75,
then we'll multiply that by 360 degrees,
giving us 270 degrees.
Now with this CSS technique of clipping a circle,
the maximum size we can represent with each wedge
is only 180 degrees,
so what we'll need to do is use two wedges,
one wedge at 180 degrees,
and the other wedge at 90 degrees.
So back in our text editor,
let's first represent the 90 degree wedge
so you can see how this effect is working.
So back in our HTML, let's find the div
that's inside of our div with a class of slice.
After our background property inside of the style attribute,
let's hit a space,
and we're going to type transform, colon, space,
then we'll type "rotate," set a parenthesis
and a semi-colon.
Inside of the parenthesis for rotate,
we're going to type 90 degrees, so "90deg".
Hit Save in our HTML.
We'll now see that the inner div is rotating
90 degrees,
but the outer div is still clipping this
within a half circle,
and so now, we'll want to rotate this entire slice
all the way around,
so that this edge here starts at the 180 degree mark,
so back to our HTML,
let's find the div with the class of slice,
let's hit a space, we'll add a style attribute,
equals two quotes,
type "transform," colon, space,
"rotate," put in our parentheses and a semi-colon,
and the rotation property here is going to be
270 degrees.
So "270deg," then hit Save.
So now with our 90 degree wedge
representing from 180 to 270 degrees,
let's come back to our HTML,
let's copy this entire slice,
going to add this above the one we just created,
and now on this first div with a class of slice,
let's come in here and change the transform
from 270 to 180 degrees
and let's come in here to the div inside
of the first class of slice
and change the rotation to 0.
Save your HTML and now back in the browser,
the first div is taking up the full half circle
to represent 180 degrees,
and then the second slice, representing 90 degrees,
starts where the 180 degree slice ends,
bringing us all the way around to 270 degrees.
And now, by repeating this technique,
you can represent any number of wedges
in your pie chart,
and now, if you'd like to dive a little deeper
into this technique
or see a more graphical explanation
of how the CSS rotation and clipping properties
are working,
check out Pie Charts with CSS,
which is also available here in the library,
and so with that, I'll conclude this episode
and as always, thanks for watching.