Article | Date posted : 20 February, 2014 | Updated on : 20 February, 2014

Explaining How to Create CSS3 Triangle Shapes

Sponsored Links

I have recently experimented with CSS3 shapes, using various articles to learn how to create them but every article that I used as a reference failed to explain what caused what to change. They simply showed how to create a triangle pointing up, down, left or right. I highly recommend understanding the concept of CSS triangles.

I will try to explain it in a way that I know how to understand, hopefully I will explain it effectively.

The following CSS code will create a blue triangle pointing up

triangle up

triangle up

.triangle-up {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 60px solid ##2E8DD0;
}

Explanation

In this case the border-bottom defines the hight of the arrow. While the border left and right defines the angle of the arrow. The angle created from the border left and right is caused by the transparent element of the border.

The starting point of the creation of our triangle shape is defined by the start of the div element. Imaging you are placing a dot at the centre of your page. As we have set the width and height to 0px, the dot on your paper is a hypothetical dot. Something that is there but not visible.

If we use 30px in border-left, that means from the centre of the div (the hypothetical dot) we will go left by 30px and down by 60px defined in the border-bottom.

border-left: 30px solid transparent;

triangle 30 pixels left

triangle 30 pixels left

When we apply the border-right by 30 px, we will do the same from the centre of the div, we will go 30 pixels to the right and 60 pixels down defined from the border-bottom.

triangle 30 pixels

triangle 30 pixels

If we set the width to 50 pixels, we will widen the point and create a trapezoid.

trapezoid 50 pixels

trapezoid 50 pixels

The height in this case will do nothing other than pushing down the triangle or trapezoid.

Changing direction

There are two ways when it comes to changing the direction.

First method by changing the borders

Using the borders to control the shape, by changing the border-bottom to border-top you will make the triangle point downwards.

triangle down

triangle down

.triangle-up {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 60px solid #2E8DD0;
}

When pointing to the left, we will make the border right solid and top and bottom transparent

triangle left

triangle left

.triangle-up {
width: 0;
height: 0;
border-right: 60px solid #2E8DD0;
border-bottom: 30px solid transparent;
border-top: 30px solid transparent;
}

Pointing to the right we will do the same as left but change the solid color from right to left

triangle right

triangle right

.triangle-up {
width: 0;
height: 0;
border-left: 60px solid #2E8DD0;
border-bottom: 30px solid transparent;
border-top: 30px solid transparent;
}


Second method by adding a transform element

This works only from IE9+ and all other webkit browser such as Chrome, Firefox, Safari and Opera will work.

triangle 15 degrees

triangle 15 degrees

.triangle-up {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 60px solid #2E8DD0;
transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}

Sponsored Links

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow me on Google+

Google Shopping Data Feed Generator

Sponsored Links

Hire Me