A CodePen by Erik James Albaugh. CSS Ribbon Triangles - Top, bottom, left, and right triangles for a ribbon-like effect using only CSS.

css-ribbon-triangles.html

<div class="container">
  <h1 class="bltri"><span>⬋</span> Bottom Left Ribbon Triangle</h1>
  <h1 class="brtri"><span>⬊</span> Bottom Right Ribbon Triangle</h1>
  <h1 class="tltri"><span>⬉</span> Top Left Ribbon Triangle</h1>
  <h1 class="trtri"><span>⬈</span> Top Right Ribbon Triangle</h1>
</div>

style.css

.container {
  padding: 50px 100px;
}

h1 {
  position: relative;
  background: #bd0000;
  padding: 5px 10px;
  margin: 30px;
  color: #fff;
  text-align: center;
}

.brtri { background: #0094af; }
.tltri { background: #a1af00; }
.trtri { background: #d45f00; }

h1.bltri span, h1.tltri span { float: left; }
h1.brtri span, h1.trtri span { float: right; }

.bltri:before, .brtri:before, .tltri:before, .trtri:before {
  content: '';
  position: absolute;
  height: 0;
  width: 0;
}

.bltri:before {
  top: 100%;
  left: 0px;
  border-top: 10px solid #7f0000;
  border-left: 10px solid transparent;
}

.brtri:before {
  top: 100%;
  right: 0px;
  border-top: 10px solid #007286;
  border-right: 10px solid transparent;
}

.tltri:before {
  bottom: 100%;
  left: 0px;
  border-bottom: 10px solid #707a00;
  border-left: 10px solid transparent;
}

.trtri:before {
  bottom: 100%;
  right: 0px;
  border-bottom: 10px solid #994400;
  border-right: 10px solid transparent;
}