JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<section>Text</section>
<wedge white-red></wedge>
<section red>Text</section>

CSS

section {
  height: 25vh;
  background: #fff;
  text-align: center;
  font-family: Avenir Next, sans-serif;
  line-height: 25vh;
  font-size: 19px;
}

[red] {
  background: red;
  color: #fff;
}

wedge {
  display: block
}

wedge:after {
  content: "";
  display: block;
  height: 4em;
}

wedge[white-red] {
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1 1'><path fill='red' d='M1 1 L0 1 L1 0 z'></path></svg>") no-repeat
}