CSS Components #2 "Ribbon Heading"

Posted 18th Nov 2018

Part 2 in the CSS components series; let's make a ribbon heading. This one probably won't be as widely used as the previous hamburger menu icon, but it's still a cool little CSS trick that you may find useful in an upcoming website design.

This is the simplest way I could think of to create this ribbon style. It uses 2 pseudo elements (:before & :after) to position 2 white triangles at both ends of the rectangle box. The triangles are created using a common trick with transparent borders on a 0px x 0px box. Borders are joined in the corners at a diagonal, and we can use this to our advantage to create a convincing looking triangle.

The biggest con about this method is that it requires a solid background for the illusion to work. Let's try a different method that'll get this working with a transparent background.

*Sorry about the background image, it's just a random placeholder...

This method uses some fancy "transform: skew()" to 'squash' a duplicate rectangle shape, both to the left and to the right.

The bad thing about this one is that now the ribbon itself can only have a solid background, as it's actually made up of 2 elements.

Or, you could create a custom SVG polygon and position that absolute? I used a fixed wdith here, but you could no-doubt use a viewBox and used percentage widths.

There's definitely a few more ways I can think of to achieve this effect, but I'm sure a few methods will do for now!