JSFiddle - React, Tailwind, and code Playground

HTML

<div class="polygone">
<svg class="triangle triangle-top" preserveAspectRatio="none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <polygon points="0 0, 100 0, 80 100"/>
</svg>
coucou
<svg class="triangle triangle-bottom" preserveAspectRatio="none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <polygon points="0 100, 100 100, 20 0"/>
</svg>
</div>

CSS

body {
  background-color:#FFF;
  margin:0;
  padding:40px 0;
}
.polygone {
  position:relative;
  background:#EEE;
  text-align:center;
  padding:100px 0;
  overflow:hidden;
}
.triangle {
  position:absolute;
  fill:#fff;
  left:0;
  width:100%;
  height:30px;
}
.triangle-top {
  top:0;
}
.triangle-bottom {
  bottom:0;
}