How to Create CSS Triangles for a Ribbon Effect

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.

A quick, but important, note: your main element (heading, legend, etc) will need to be set to “position: relative” so that the triangles can be positioned appropriately. we’ll be assuming that the main element for these examples is a heading 1 (h1), so replace the h1’s below with the element of your choice.

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.

See Demo on CodePen

Bottom Left Triangle

h1:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0px;
  height: 0;
  width: 0;
  border-top: 10px solid black;
  border-left: 10px solid transparent;
}

Bottom Right Triangle

h1:after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0px;
  height: 0;
  width: 0;
  border-top: 10px solid black;
  border-right: 10px solid transparent;
}

Top Left Triangle

h2:before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0px;
  height: 0;
  width: 0;
  border-bottom: 10px solid black;
  border-left: 10px solid transparent;
}

Top Right Triangle

h2:after {
  content: '';
  position: absolute;
  bottom: 100%;
  right: 0px;
  height: 0;
  width: 0;
  border-bottom: 10px solid black;
  border-right: 10px solid transparent;
}