CSS3 ribbon effect

torsdag 28 juli 2011 - Filed under CSS

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!

2011-07-28  »  Asgeir