CSS-only ribbons are a popular effect. Sometimes you need a triangle that will make it look as though your element is wrapping in from the left, sometimes the right, and sometimes both. Below are a few snippets to help quickly create these little triangles to create the ribbon effect you desire.
We will be using the :before and :after pseudo-elements to achieve this effect, so you will be limited to 2 triangles per element. Pseudo-element browser support for these is as follows: IE8+, Firefox, Chrome, Safari, Opera.