Drawing CSS Triangles with Borders

Triangles appear throughout front-end interfaces, including tooltips. CSS offers several ways to create them; see Several Ways to Create CSS Triangles.

Using border is one of the simpler practical ways to make them. Here is how it works: assign red, yellow, blue, and green to the four borders.

.triangle {
    height: 0;
    width: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 40px 40px 40px 40px;
}

The result:

The source image is no longer available: original image URL

Four triangles combine into an 80x80 square. To keep only one triangle, make the other borders transparent. The unchanged CSS is omitted below:

.triangle {
    border-color: #ff0000 transparent transparent transparent;
    border-width: 40px 40px 40px 40px;
}

The result:

The source image is no longer available: original image URL

IE6 does not support transparent, so those borders appear as ugly black areas. One workaround is to set the corresponding border-style values to dashed:

.triangle {
    border-color: #ff0000 transparent transparent transparent;
    border-style: solid dashed dashed dashed;
    border-width: 40px 40px 40px 40px;
}

A square can also be divided diagonally into two triangles:

.triangle {
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 0 0 40px 40px;
}

The source image is no longer available: original image URL

.triangle {
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 0 40px 40px 0;
}

The source image is no longer available: original image URL

The square is now 40x40.

What happens when only one side of border-width is zero? There are two cases:

.triangle {
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 40px 40px 0 40px;
}

The source image is no longer available: original image URL

.triangle {
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 40px 40px 40px 0;
}

The source image is no longer available: original image URL

The result is an 80x40 rectangle. The border opposite the zero-width side forms a larger triangle whose length is doubled.

SegmentFault’s “Accepted” marker is also built from triangles:

The source image is no longer available: original image URL

The upper block contains the word “Accepted” and uses position: relative. An after pseudo-element creates the lower block with position: absolute, joining the two pieces. Its border-width forms a rectangle instead of a square, and making the lower border transparent removes the downward triangle. The CSS makes the construction clear and demonstrates a useful application of border triangles:

.accepted-flag:after {
    position: absolute;
    left: 0;
    top: 25px;
    content: '';
    border-width: 9px 18px;
    border-style: solid;
    border-color: #009a61 #009a61 transparent #009a61;
}

Originally published on SegmentFault.