How to create Triangles using CSS

Many times we come across cases where we want to have triangles, arrows or simple shapes on a site. Usually we use images to add arrows or triangles. However, this can be easily achieved by just using CSS and no need of images at all. In this post we will see how to easily we can create triangles and a few other designs using CSS.

The borders in a browser are drawn at angles, so we can use this technique to create triangle. To create a triangle we will set the border-width value for the side in which we need the arrow. Then, we will set that side’s border color and make all other sides transparent. Also, we set the width and height of the element to 0.

Here is an example of how we will create an up arrow:

Code to create this arrow:
CSS:

.vc-arrow-up {
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 15px solid #666666;
	height: 0;
	width: 0;
}

HTML:

<div class="vc-arrow-up"></div>

Code to create all other arrows:

.vc-arrow-down {
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #009900;
	height: 0;
	width: 0;
}
.vc-arrow-right {
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 15px solid #FF3300;
	height: 0;
	width: 0;
}
.vc-arrow-left {
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right: 20px solid #0033FF;
	height: 0;
	width: 0;
}

Here are how the other 3 arrows will look:

Using this simple CSS code we can easily create triangles without using images. We can also use this technique to create different designs. Below are some samples that can be done using different kinds of borders and using single or multiple border colors.

Multi colored Div:

.vc-arrow-multicolor {
	border-color: #FF3300 #0033FF #FFFF00 #009900;
	border-style: solid;
	border-width: 20px;
	width: 0;
	height: 0;
}

Single color, border-style:double

.vc-arrow-singlecolor-double {
	border: 20px double #666666;
	width: 0;
	height: 0;
}

Multi-color, border-style:double

.vc-arrow-multicolor-double {
	border-color: #FF3300 #0033FF #FFFF00 #009900;
	border-style: double;
	border-width: 20px;
	width: 0;
	height: 0;
}

Single color, border-style:groove

.vc-arrow-singlecolor-groove {
	border: 20px groove #666666;
	width: 0;
	height: 0;
}

Multi-color, border-style:ridge

.vc-arrow-multicolor-ridge {
	border-color: #FF3300 #0033FF #FFFF00 #009900;
	border-style: ridge;
	border-width: 20px;
	width: 0;
	height: 0;
}

Single color, border-style:inset

.vc-arrow-singlecolor-inset {
	border: 20px inset #666666;
	width: 0;
	height: 0;
}

Multi-color, border-style:outset

.vc-arrow-multicolor-outset {
	border-color: #FF3300 #0033FF #FFFF00 #009900;
	border-style: outset;
	border-width: 20px;
	width: 0;
	height: 0;
}

In all the above designs we had the width and height parameters set to 0. We can change them to get more designs.

Multi colored Div, non-zero width:

.vc-arrow-multicolor-width {
	border-color: #FF3300 #0033FF #FFFF00 #009900;
	border-style: solid;
	border-width: 20px;
	width: 20px;
	height: 0;
}

Single color, border-style:double, non-zero width

.vc-arrow-singlecolor-double-width {
	border: 20px double #666666;
	width: 20px;
	height: 0;
}

Multi colored Div, non-zero height:

.vc-arrow-multicolor-height {
	border-color: #FF3300 #0033FF #FFFF00 #009900;
	border-style: solid;
	border-width: 20px;
	width: 0;
	height: 20px;
}

Single color, border-style:double, non-zero height

.vc-arrow-singlecolor-double-height {
	border: 20px double #666666;
	width: 0;
	height: 20px;
}

Also, we can change the elements width and height to get different designs.

Multi colored Div, non-zero height and width:

.vc-arrow-multicolor-height-width {
	border-color: #FF3300 #0033FF #FFFF00 #009900;
	border-style: solid;
	border-width: 20px;
	width: 20px;
	height: 20px;
}

Also, we can change the elements border width and height for different sides to get different designs.

Multi colored Div, different border widths and heights:

.vc-arrow-multicolor-border-width {
	border-color: #FF3300 #0033FF #FFFF00 #009900;
	border-style: solid;
	border-width: 15px 30px 30px 10px;
	width: 0;
	height: 0;
}

We can create many more designs by changing the border-color, border-size, border-style, height and width of the element. By using the above properties we can easily create arrows and different designs from CSS and without using any images.

View Demo
Download Source Code