3 Styles of CSS Arrows

By James Gould

With CSS, you can create a wide array of easily modifiable shapes, to great effect. In this article, I explain and document three manners and discuss what can be done with each kind.

CSS Triangles

First, we have CSS triangles made from borders. These are created using the border CSS attribute. When CSS renders a border, it generally creates four trapezoids on the sides of the object, as you can see below. When the smallest side of the "trapezoid" reaches 0 width, it becomes a triangle. You may also note that any two of the sides of the final example form a right triangle as well.

<div>'s with borders:

Then, if we remove three sides of the triangle by making them transparent, and removing the side we don't want, we get a triangle. By changing the width of the border, we can then make a triangle with any dimensions. You can use this CSS triangle generator to play around with CSS triangles.

We can then add triangular mask, made with the same technique, over the triangle to make it an arrow. I use the before and after pseudo-elements as masks, and I recommend you do the same, as it keeps your HTML clean of unnecessary clutter. The masks are displayed in red below, and then in the background color, white, in the second example. There is unfortunately no effective way to use masks like this on images and gradients, as you cannot make them transparent.

Triangle Examples (click to view HTML, CSS and masks)

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

<style>

.triangle{

width: 0;

height: 0;

border-style: solid;

border-width: 30px 0 30px 50px;

border-color: transparent transparent transparent #222;

}

</style>

<div class="arrow"></div>

<style>

.arrow{

width: 0;

height: 0;

border-style: solid;

border-width: 30px 0 30px 50px;

border-color: transparent transparent transparent #222;

}

.arrow:after{

content:'';

position:absolute;

transform:translate(-65px, -30px);

width: 0;

height: 0;

border-style: solid;

border-width: 30px 0 30px 50px;

border-color: transparent transparent transparent #fff;

}

</style>

<div class="arrow tall"></div>

<style>

.arrow{

width: 0;

height: 0;

border-style: solid;

border-width: 30px 0 30px 50px;

border-color: transparent transparent transparent #222;

}

.arrow:after{

content:'';

position:absolute;

transform:translate(-65px, -30px);

width: 0;

height: 0;

border-style: solid;

border-width: 30px 0 30px 50px;

border-color: transparent transparent transparent #fff;

}

.arrow.tall{

border-width: 30px 0 30px 30px;

}

.arrow.tall:after{

transform:translate(-40px, -30px);

border-width: 30px 0 30px 30px;

}

</style>

<div class="arrow long"></div>

<style>

.arrow{

width: 0;

height: 0;

border-style: solid;

border-width: 30px 0 30px 50px;

border-color: transparent transparent transparent #222;

}

.arrow:after{

content:'';

position:absolute;

transform:translate(-65px, -30px);

width: 0;

height: 0;

border-style: solid;

border-width: 30px 0 30px 50px;

border-color: transparent transparent transparent #fff;

}

.arrow.long{

border-width: 20px 0 20px 60px;

}

.arrow.long:after{

transform:translate(-80px, -20px);

border-width: 20px 0 20px 60px;

}

</style>

<div class="arrow fat"></div>

<style>

.arrow{

width: 0;

height: 0;

border-style: solid;

border-width: 30px 0 30px 50px;

border-color: transparent transparent transparent #222;

}

.arrow:after{

content:'';

position:absolute;

transform:translate(-65px, -30px);

width: 0;

height: 0;

border-style: solid;

border-width: 30px 0 30px 50px;

border-color: transparent transparent transparent #fff;

}

.arrow.fat:after{

transform:translate(-75px, -30px);

}

</style>

<div class="arrow skinny"></div>

<style>

.arrow{

width: 0;

height: 0;

border-style: solid;

border-width: 30px 0 30px 50px;

border-color: transparent transparent transparent #222;

}

.arrow:after{

content:'';

position:absolute;

transform:translate(-65px, -30px);

width: 0;

height: 0;

border-style: solid;

border-width: 30px 0 30px 50px;

border-color: transparent transparent transparent #fff;

}

.arrow.skinny:after{

transform:translate(-55px, -30px);

}

</style>

Creating CSS Arrows Using Two Border-sides

We can also make arrows using two sides of a CSS border on a transparent square div. These are less flexible, as they are always 90 degrees due to the box model. However, they can be used on top of images and gradients without the mask showing up, unlike the previous example. I use transition:rotate(45deg); to rotate the following examples to point to the right.

We can then the border-radius attribute to curve the outside corners of the border, which is another benefit of this style of arrow.

The top and bottom curves are kind of funky looking in my opinion, and you can't curve their interiors, and the interior of the point isn't curved to match the outside. We can fix all of this with a rectangular CSS masks to flatten the top and bottom points and add an interior border using the same technique we used to make this triangle like we did in the previous section with triangles. Again, this will make this triangle not work on gradient and image backgrounds, as the masks will show up.

Border Examples (click to view HTML, CSS and masks)

<div class="border-arrow"></div>

<style>

.border-arrow{

width:40px;

height:40px;

border:5px solid #222;

border-width:5px 5px 0 0;

transform:translateX(-14px) rotate(45deg);

}

</style>

<div class="border-arrow fat"></div>

<style>

.border-arrow{

width:40px;

height:40px;

border:5px solid #222;

border-width:5px 5px 0 0;

transform:translateX(-14px) rotate(45deg);

}

.border-arrow.fat{

border-width:9px 9px 0 0;

}

</style>

<div class="border-arrow curvy"></div>

<style>

.border-arrow{

width:40px;

height:40px;

border:5px solid #222;

border-width:5px 5px 0 0;

transform:translateX(-14px) rotate(45deg);

}

.border-arrow.curvy{

border-width:9px 9px 0 0;

border-radius:7px;

}

</style>

<div class="border-arrow curvy curvy-inside"></div>

<style>

.border-arrow{

width:40px;

height:40px;

border:5px solid #222;

border-width:5px 5px 0 0;

transform:translateX(-14px) rotate(45deg);

}

.border-arrow.curvy{

border-width:9px 9px 0 0;

border-radius:7px;

}

.border-arrow.curvy-inside{

border-width:11px 11px 0 0;

}

.border-arrow.curvy-inside:before{

content:'';

display:block;

position:absolute;

width:40px;

height:40px;

border:5px solid #fff;

border-width:5px 5px 0 0;

transform:translate(-2px, -3px);

border-radius:4px;

}

</style>

<div class="border-arrow curvy curvy-inside flat-back"></div>

<style>

.border-arrow{

width:40px;

height:40px;

border:5px solid #222;

border-width:5px 5px 0 0;

transform:translateX(-14px) rotate(45deg);

}

.border-arrow.curvy{

border-width:9px 9px 0 0;

border-radius:7px;

}

.border-arrow.curvy-inside{

border-width:11px 11px 0 0;

}

.border-arrow.curvy-inside:before{

content:'';

display:block;

position:absolute;

width:40px;

height:40px;

border:5px solid #fff;

border-width:5px 5px 0 0;

transform:translate(-2px, -3px);

border-radius:4px;

}

.border-arrow.flat-back{

transform:translateX(-19px) rotate(45deg);

}

.border-arrow.flat-back:after{

content:'';

display:block;

position:absolute;

width:8px;

height:80px;

background-color:#fff;

transform:translate(20px, -25px) rotate(-45deg);

}

</style>

Creating CSS Triangles Using Masks

Now, I know what you're thinking. "Gradients don't have good browser support on borders, and the previous methods don't require enough tweaking to get right!" Well, you can also use a mask over half of a square div to create a right triangle, which allows you to use gradients on your triangles. Again, you can use a CSS mask to make them arrows.

Box Examples (click to view HTML, CSS and masks)

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

<style>

.box-triangle{

position:relative;

width:50px;

height:50px;

background-color:#222;

transform:translate(-14px, 0) rotate(45deg);

}

.box-triangle:before{

content:'';

position:absolute;

width:35px;

height:70px;

background-color:#fff;

transform:translate(-5px, 3px) rotate(-45deg);

}

</style>

<div class="box-triangle box-arrow"></div>

<style>

.box-triangle{

position:relative;

width:50px;

height:50px;

background-color:#222;

transform:translate(-14px, 0) rotate(45deg);

}

.box-triangle:before{

content:'';

position:absolute;

width:35px;

height:70px;

background-color:#fff;

transform:translate(-5px, 3px) rotate(-45deg);

}

.box-triangle.box-arrow:after{

content:'';

position:absolute;

width:40px;

height:40px;

background-color:#fff;

transform:translate(2px, 8px);

}

</style>

<div class="box-triangle rainbow"></div>

<style>

.box-triangle{

position:relative;

width:50px;

height:50px;

background-color:#222;

transform:translate(-14px, 0) rotate(45deg);

}

.box-triangle:before{

content:'';

position:absolute;

width:35px;

height:70px;

background-color:#fff;

transform:translate(-5px, 3px) rotate(-45deg);

}

.rainbow{

background: #800080; /* Old browsers */

/* for IE9 support details: http://www.colorzilla.com/gradient-editor/ */

background: -moz-linear-gradient(45deg, #800080 52%, #4b0082 56%, #0000ff 62%, #008000 68%, #ffff00 75%, #ffa500 83%, #ff0000 91%, #800080 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left bottom, right top, color-stop(52%,#800080), color-stop(56%,#4b0082), color-stop(62%,#0000ff), color-stop(68%,#008000), color-stop(75%,#ffff00), color-stop(83%,#ffa500), color-stop(91%,#ff0000), color-stop(100%,#800080)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(45deg, #800080 52%,#4b0082 56%,#0000ff 62%,#008000 68%,#ffff00 75%,#ffa500 83%,#ff0000 91%,#800080 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(45deg, #800080 52%,#4b0082 56%,#0000ff 62%,#008000 68%,#ffff00 75%,#ffa500 83%,#ff0000 91%,#800080 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(45deg, #800080 52%,#4b0082 56%,#0000ff 62%,#008000 68%,#ffff00 75%,#ffa500 83%,#ff0000 91%,#800080 100%); /* IE10+ */

background: linear-gradient(45deg, #800080 52%,#4b0082 56%,#0000ff 62%,#008000 68%,#ffff00 75%,#ffa500 83%,#ff0000 91%,#800080 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#800080', endColorstr='#800080',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */

}

</style>

<div class="box-triangle box-arrow rainbow"></div>

<style>

.box-triangle{

position:relative;

width:50px;

height:50px;

background-color:#222;

transform:translate(-14px, 0) rotate(45deg);

}

.box-triangle:before{

content:'';

position:absolute;

width:35px;

height:70px;

background-color:#fff;

transform:translate(-5px, 3px) rotate(-45deg);

}

.box-triangle.box-arrow:after{

content:'';

position:absolute;

width:40px;

height:40px;

background-color:#fff;

transform:translate(2px, 8px);

}

.rainbow{

background: #800080; /* Old browsers */

/* for IE9 support details: http://www.colorzilla.com/gradient-editor/ */

background: -moz-linear-gradient(45deg, #800080 52%, #4b0082 56%, #0000ff 62%, #008000 68%, #ffff00 75%, #ffa500 83%, #ff0000 91%, #800080 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left bottom, right top, color-stop(52%,#800080), color-stop(56%,#4b0082), color-stop(62%,#0000ff), color-stop(68%,#008000), color-stop(75%,#ffff00), color-stop(83%,#ffa500), color-stop(91%,#ff0000), color-stop(100%,#800080)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(45deg, #800080 52%,#4b0082 56%,#0000ff 62%,#008000 68%,#ffff00 75%,#ffa500 83%,#ff0000 91%,#800080 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(45deg, #800080 52%,#4b0082 56%,#0000ff 62%,#008000 68%,#ffff00 75%,#ffa500 83%,#ff0000 91%,#800080 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(45deg, #800080 52%,#4b0082 56%,#0000ff 62%,#008000 68%,#ffff00 75%,#ffa500 83%,#ff0000 91%,#800080 100%); /* IE10+ */

background: linear-gradient(45deg, #800080 52%,#4b0082 56%,#0000ff 62%,#008000 68%,#ffff00 75%,#ffa500 83%,#ff0000 91%,#800080 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#800080', endColorstr='#800080',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */

}

</style>

Usage Examples

Example Dropdown

Choose an option Bacon Vanilla Ice Cream Hot Cheetos

Example Slider

Example Link

Find out more!

Think I missed something? Know a better way of doing something? Fork me on Github!