JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="separator">
    Nulla porta dolor. Sed lectus. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna.

Etiam ultricies nisi vel augue. Phasellus viverra nulla ut metus varius laoreet. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Quisque id mi.

Nunc sed turpis. Praesent ac sem eget est egestas volutpat. Suspendisse potenti. Cras ultricies mi eu turpis hendrerit fringilla. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis.

Aenean viverra rhoncus pede. Ut a nisl id ante tempus hendrerit. Praesent nonummy mi in odio. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. In hac habitasse platea dictumst.
</div>

CSS

html,body{
    padding: 0;
    margin: 0;
    background-color: #ddd;
}

.separator{
    position: relative;
    width:100vw;
    margin:0 auto;
    background-color: #fff;
}
.separator:before, .separator:after{
    content:'';
    display:block;
}
.separator:before{
    border-left: 100vw solid #fff;
    border-bottom: 0;
    border-right: 0;
    border-top: 60px solid transparent;
    position: absolute;
    top: -60px;
    left: 0;
    right: 0;
}
.separator:after{
    border-right: 100vw solid #fff;
    border-top: 0;
    border-left: 0;
    border-bottom: 50px solid transparent;
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
}