JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<section class="top">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra porta ex. Morbi dolor ligula, gravida sit amet neque quis, vulputate pellentesque erat. Donec eget cursus elit, vel lobortis massa. Aenean quis suscipit lectus, mattis molestie ex. In venenatis id nulla vitae sodales. Vestibulum ultricies pellentesque augue vitae venenatis. Aenean erat metus, fringilla pharetra metus ac, posuere volutpat massa. Fusce ut arcu in ipsum aliquam vehicula ac ac nunc. Nam mi mi, pharetra a laoreet in, vulputate eu diam.
</p>
<p>
Sed malesuada imperdiet interdum. Praesent dignissim, massa ac euismod congue, sem eros fermentum lectus, in molestie dolor massa vel mauris. Sed nisi felis, condimentum id rutrum eu, malesuada hendrerit enim. Aliquam eu tortor tincidunt, vehicula velit sit amet, tempus nisl. Aliquam porttitor felis nibh, eget accumsan nulla gravida non. Vestibulum sollicitudin urna vitae lacus gravida blandit. Maecenas vehicula mi ut ante malesuada ornare. Nam non quam aliquam, gravida velit nec, vehicula eros. Curabitur vitae varius lacus, id gravida magna. Nullam tortor erat, porta non lorem vitae, dictum volutpat turpis. Suspendisse potenti. Cras euismod leo vestibulum velit pulvinar consequat. Mauris eros sapien, vulputate in mattis et, tristique vel nisl. Aenean vitae cursus dui. Nam ornare, risus quis sagittis malesuada, odio ex luctus mi, et molestie justo tellus id risus.
</p><p>
Maecenas finibus sem congue mi blandit gravida. Suspendisse potenti. Aenean tincidunt leo quis est aliquam porta. Nulla vel luctus nibh. Ut sagittis eu nisi vitae iaculis. Phasellus a mauris in quam iaculis varius quis id quam. Proin vitae suscipit massa. Ut congue efficitur convallis. Ut volutpat turpis quis diam accumsan aliquam. Sed lobortis congue tempor. Nunc tempor id neque quis elementum. Quisque a rhoncus velit. Nullam est mauris, mollis id ullamcorper vitae, maximus eu sem. Maecenas turpis quam, ornare dignissim aliquet in, ultrices...

CSS

html, body {
  margin:0;
}
section {
  height:66.666vh;
  position:relative;
  box-sizing:border-box;
}
section.top {
  background:blue;
}
section.bottom {
  background:pink;
}
section.top { clip-path: polygon(0 100%, 0 0%, 100% 0, 100% 50%); }
section.bottom {
  clip-path: polygon(0% 100%, 0% 50%, 100% 0, 100% 100%); 
  transform:translateY(-50%);
}
section.bottom .void {
  background:red;
  float:left;
  width:100%;
  height:50%;
  shape-outside: polygon(0 100%, 0 0%, 100% 0, 100% 0%);
}