Shayan sobhanian Creating Triangles in CSS

Bonus: Creating Triangles in CSS

In the comment bubble shown in Figure 6-1, the little triangle shape pointing to the previous paragraph is

in turn absolutely positioned relative to the comment bubble. It is created as a pseudo-element, and given

a triangular shape using an old clever trick with borders. (It goes back at least as far as 2001—see this page

from Tantek Çelik: http://tantek.com/CSS/Examples/polygons.html.) Figure 6-3 shows how it works.

.comment:after {

position: absolute;

content: '';

display: block;

width: 0;

height: 0;

border: .5em solid #dcf0ff;

border-bottom-color: transparent;

border-right-color: transparent;

position: absolute;

right: -1em;

top: .5em;

}

0 × 0 px element

Figure 6-3. Creating an arrowhead with a zero-size element and borders. As the right and bottom edges are

made transparent, a triangle shape is left

Figure 6-4. Positioning the triangle in relation to the contents of the comment

Here we are creating a 0 × 0–pixel block that has a .5 em border—but only the top and right border

edges have any color, so we end up with a triangle, since the border edges of the corners are rendered with a

slant. A handy way to generate triangles without images! We then position the triangle so it sticks out of the

top right of the comment box (see Figure 6-4).

 Shayan sobhanian