CSS Triangle

Xah Lee, 2013-03-05

This page shows you how to use pure CSS to create a triangle.

Here's a CSS triangle.

here's the HTML code:

<div class="xyz"></div>

here's the CSS code:

div.xyz {
width: 0; height: 0;
 border-left: 20px solid red;
 border-right: 20px solid transparent;
 border-top: 20px solid transparent;
 border-bottom: 20px solid transparent;
}

The trick is to set the element to have 0 width and height, then use a thick border, then make the sides of border transparent except one side.

Here's the same element but with border sides colored, and the element has width height of 10 px, and with text “A”.

CSS triangle can save you from using a image, which is slower because of HTTP request.

Using Unicode for Triangle and Arrow

A even better solution is to use Unicode. Here's a example:

▶

Here's the HTML code:

<p><span class="unicode-triangle-α">▶</span></p>

Here's the CSS:

span.unicode-triangle-α {font-size:40px;color:red}

Best to set your HTML to use UTF-8 encoding. See: Character Sets and Encoding in HTML.

For more Unicode shapes, see:

• Unicode Geometric Shapes ● ■ ▲ ◩ ◐ ◵
• Unicode: Drawing Lines, Boxes, Shapes
• Unicode: Arrow Symbols ← → ↑ ↓