Ribbons

draw some ribbons

by vikikamath

HTML

<ul class="">
  <li class="tag">Good Bad Ugly</li>
  <li class="tag">Usual Suspects</li>
  <li class="tag">Eternal Sunshine of a Spotless Mind</li>
</ul>

CSS

body {
  background: #fff;
}
.flex {
  flex-flow: row wrap;
}
.tag {
  display: inline-block;
  background: red;
  color: antiquewhite;
  margin: 0 auto;
  height: 1.5rem;
  line-height: 1.5rem;
  position: relative;
  padding: 0 4.5rem 0 4.5rem;
}
.tag::before {
  content: '';
  border-bottom: solid 0.8rem red;
  border-left: solid 1.6rem white;
  border-top: solid 0.8rem red;
  position: absolute;
  left: 0;
  top: 0;
}
.tag:after {
  content: '';
  border: transparent;
  border-bottom: solid 0.8rem white;
  border-left: solid 1.6rem red;
  border-top: solid 0.8rem white;
  position: absolute;
  right: 0;
}

.tag:nth-child(2) {
  background: blue;
  color: white;
}
.tag:nth-child(2):before {
  border-bottom: solid 0.8rem blue;
  border-left: solid 1.6rem white;
  border-top: solid 0.8rem blue;
}
.tag:nth-child(2):after {
  border: transparent;
  border-bottom: solid 0.8rem white;
  border-left: solid 1.6rem blue;
  border-top: solid 0.8rem white;
  position: absolute;
  right: 0;
}