This wrap-around banner effect contains no unneccessary markup, and uses padding + negative margins to align the content with its parent element. The illusion of depth is achieved by using the :before and :after selectors. The triangles are created with border corners, where an opaque border meets a transparent border.
As far as I know, there is no simpler way to achieve this effect. Hope you can use it!
Do say hi on Twitter: @asgeirhoem or visit my portfolio.
All modern browsers, including IE8 and 9.
#wraparound {
position:relative;
padding:20px 30px;
margin:0 -30px 0 -30px;
}
#wraparound:before,
#wraparound:after {
content:" ";
border-top:10px solid #your-color;
position:absolute;
bottom:-10px;
}
#wraparound:before {
border-left:10px solid transparent;
left:0;
}
#wraparound:after {
border-right:10px solid transparent;
right:0;
}
Decorative styles stripped. View source for the rest.