Identify Design
100% Giraffe Approved
Tutorial Preview Avatar

Triangles and Circles using CSS

Avatar of Woody

by

Monday May 7th, 2012 in CSS Tutorials

In this quick tip we're going to show you how to create triangles and circles using just stylesheets. It's straight forward and easy and works in most browsers, barring the usual contingent of older browsers that support nothing modern.

Why would you use stylesheets to make triangles and circles? The simple answer: HTTP requests. HTTP requests occur everytime a file is needed on your page. These requests, when stacked up, can seriously drag the load speed of your pages down regardless of how fast the viewer's connection is. A useful metaphor is a bottleneck: when lots of HTTP requests try squeezing through the bottleneck, they sometimes choke and take a lot longer to get through. A few HTTP requests won't cause any visible difference but a large quantity will.

Circles

Circles are made simply using border-radius. This is a stylesheet property used to make curved corners. To make a circle we simply make the border-radius the width and height of an element. Let's make a box 100x100 and make it a circle with a simple stylesheet:

<style type="text/css">

.circle{

background:#000;
width:100px;
height:100px;
border-radius:50px;

}

</style>

<div class="circle"></div>

Relative Circles

What if we want to have our circle stay a circle regardless of what size we set it? That's easy. We set the border-radius to 50% and whatever the size of the circle it'll always be round:

<style type="text/css">

.circle2{

background:#000;
width:500px;
height:500px;
border-radius:50%;

}

</style>

<div class="circle2"></div>

Simple and easy. Some older versions of Firefox and Chrome require prefixes to display border-radius correctly. All modern versions don't require this prefix but it's always good to cater to users of older versions when possible:

border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;

Triangles

Triangles are a little more complicated because they're not a standard and therefore it's tricky getting them to work in every browser. We're going to take advantage of what you could consider a bug. When the border of an element is bigger than the element's size the border expands in a diamond, not a square. Using this render style we can make triangles with a little clever trick.

The element you want to be a triangle should be 0 wide and 0 tall. Whatever side you want the flat side of the triangle to be on is the only side the border is defined on. Set the size to however big you want the triangle. The borders either side of that point need to be set to transparent and the same size as the border declaration. The opposite border should be irrelevant but we'll cover why not shortly.

Here's a triangle pointing down:

<style type="text/css">

.triangle{

width:0;
height:0;
border-top:20px solid #000;
border-left:20px solid transparent;
border-right:20px solid transparent;

}

</style>

<div class="triangle"></div>

Now depending on what browser you're using you should see a crisp triangle.

In Google Chrome the edge of the triangles will be a terrible quality due to the lack of native antialiasing. A simple fix for this is to rotate the triangle by 360 degrees. This forces Chrome to antialias the triangle, which smooths the edges:

<style type="text/css">

.triangle2{

width:0;
height:0;
border-top:20px solid #000;
border-left:20px solid transparent;
border-right:20px solid transparent;
-webkit-transform:rotate(360deg);

}

</style>

<div class="triangle"></div>

In some browsers, including Firefox and Internet Explorer, you might notice an irritating black line on the opposite end of the triangle. This is because the border colour being used is being displayed outside the triangle is showing. To fix this we should change the border colour to an rgba equivalent of transparent black, rather than the hex code:

In some browsers that now use antialiasing by default you will notice an irritating black line on the opposite end of the triangle. This is because antialiasing combined with the transparent makes the transparent colour blur, which causes the shadow effect (it's not a colour, and whatever colour you set the triangle to you will still see this black smudge). To overcome this we should the rgba equivalent of transparent black:

<style type="text/css">

.triangle3{

width:0;
height:0;
border-top:20px solid #000;
border-left:20px solid rgba(0,0,0,0);
border-right:20px solid rgba(0,0,0,0);
-webkit-transform:rotate(360deg);

}

</style>

<div class="triangle"></div>

Which will make this smudge go away.

It will, however, cause a small problem in Internet Explorer's older versions. They don't support rgba colours. How do we get around this? Easy. We just put the original transparent declaration in before the rgba version. The older browsers won't be able to process the second declaration so will ignore it, sticking to the transparent version. Will they have the black smudge? No, because this isn't a problem in Internet Explorer:

<style type="text/css">

.triangle4{

width:0;
height:0;
border-top:20px solid #000;
border-left:20px solid transparent;
border-left:20px solid rgba(0,0,0,0);
border-right:20px solid transparent;
border-right:20px solid rgba(0,0,0,0);
-webkit-transform:rotate(360deg);

}

</style>

<div class="triangle"></div>

For a small minority this triangle still might look wrong. The only thing we haven't covered so far is the antialiasing in Firefox which overdoes the smoothing of the border edges. To remove this effect we simply change the border style to inset. You shouldn't do this in every browser, though. It will break the triangles in Chrome and Internet Explorer by adding the black smudge from before. Crazy or what?

Simply add the -moz- prefix before a border-style: inset property:

<style type="text/css">

.triangle5{

width:0;
height:0;
border-top:20px solid #000;
border-left:20px solid transparent;
border-left:20px solid rgba(0,0,0,0);
border-right:20px solid transparent;
border-right:20px solid rgba(0,0,0,0);
-webkit-transform:rotate(360deg);
-moz-border-style:inset;

}

</style>

<div class="triangle"></div>

And there you have triangles and circles in CSS! To close I'd like to share this link with you. It's an excellent generator to make CSS triangles for you. It might save some time! CSS Triangle Generator

Leave a reply

You must be logged in to post a comment.