JSFiddle - React, Tailwind, and code Playground

by nilloc

HTML

<div class="triangle">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora facere, fugit quia eum, asperiores quasi, sunt rem et culpa maxime animi illum cumque expedita ipsum non! Possimus quis asperiores blanditiis.
  </p>
</div>

CSS

.triangle {
  position:relative;
  height: 50vh;
  width: 80vh;
  background-color:hsla(120,100%,0%, 0.2);
  -webkit-shape-inside: polygon(0 0, 100% 0, 100% 100%, 50% 0, 0 100%);
  /* clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 0, 0 100%); */
  display:flex;
}

.triangle::before,
.triangle::after
{
  content: "";
  background: hsla(240,100%,50%, 0.2);;
  display: block;
  height: 100%;
  width: 100%;
  shape-margin: 0px;
  position:relative;
  flex-shrink:none;
  
  shape-outside: polygon(0 0, 50% 0, 0 100%);
  clip-path: polygon(0 0, 50% 0, 0 100%);
  
  /* shape-outside: polygon(0 0, 100% 0, 100% 100%, 50% 0, 0 100%); */
  /* clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 0, 0 100%); */
  
  flex:none;
}

.triangle::after {
  shape-outside: polygon(50% 0, 100% 0, 100% 100%);
  clip-path: polygon(50% 0, 100% 0, 100% 100%);
  margin-left:-100%;
}

.triangle::before {
  margin-right:-100%;
}