Generated Content - Beginning CSS3 - page 354

2. To create the ribbon effect, the heading's background needs to extend through the

padding and into the margins of the wrapper <div> . The padding is 20px wide, so
to extend the background a further 20px into the margin, you need to add negative
left and right margins of 40px to the heading. It also needs to be relatively positioned
so that it becomes the containing block for the absolutely positioned ::before and
::after pseudo-elements (see Chapter 11 for an explanation of the containing
block). Add the following styles to the h1 style block:

h1 {
background-color: #5C4837;
color: #FFF;
padding: 5px 40px;
-webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
margin: 0 -40px;
position: relative;
}

3. The ::before and ::after pseudo-elements both need display triangles of a

slightly darker color than the background. The triangles are made by setting the
content property to an empty string (a pair of quotes with nothing between them),
setting the width and height to 0 , and adding a 20px solid top border. The triangles
need to be absolutely positioned directly beneath the heading. Add the following
style rule for properties common to both pseudo-elements:

h1::before, h1::after {
content: '';
height: 0;
width: 0;
border-top: 20px solid #453629;
position: absolute;
bottom: -20px;
}

4. To complete the triangles and position them horizontally, the one in the ::before

pseudo-element needs a transparent left border the same size as the top border,
and it needs to be flush with the left side of the heading. The triangle in the ::after
pseudo-element needs a transparent right border, and should be flush with the right
side of the heading. Add the following styles for the two pseudo-elements:

h1::before {
border-left: 20px solid transparent;
left: 0;
}
h1::after {
border-right: 20px solid transparent;
right: 0;
}