HTML and CSS Reference
In-Depth Information
The styles in comment.html then add the common properties for the ::before and ::after
pseudo-elements, and create a left-facing green triangle in the ::before pseudo-element like this:
.comment::before, .comment::after {
content: '';
width: 0;
height: 0;
position: absolute;
.comment::before {
border-style: solid;
border-width: 15px 30px;
border-color: transparent #060 transparent transparent;
left: -60px;
top: 10px;
The triangle is created with left and right borders that are twice the width of the top and bottom ones, and by
setting the color of all sides except the right to transparent . This produces a more acute angle. The negative left
offset is equivalent to the width of the left and right borders, attaching the green triangle to the edge of the border,
as shown in Figure 15-17 .
Figure 15-17. The ::before pseudo-element creates a solid green triangle
Finally, the ::after pseudo-element creates a smaller, white left-facing triangle, and superimposes it on the
green triangle like this:
.comment::after {
border-width: 8px 23px;
border-style: solid;
border-color: transparent #FFF transparent transparent;
left: -46px;
top: 17px;
Again, the triangle is created using a narrower top and bottom border. Getting exactly the right size is mainly
a question of trial and error. However, the negative left offset should be equal to the width of the horizontal
Superimposing one triangle on top of the other creates the illusion of a continuous border, as shown earlier
in Figure 15-15 .
Creating a Thought Bubble
A variation of the same basic technique is used to create the thought bubble in Figure 15-18 .
Search WWH ::

Custom Search