JSFiddle - React, Tailwind, and code Playground

by Johan Vandeplas

HTML

<div class="t">
    <p>Add text to see how it scales</p>
</div>

CSS

.t {
    position: relative;
    margin-left: 100px;
    display: inline-block;
}
.t::before, .t::after {
    left: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    content: '';
    background: blue;
}
.t::before {
    top: 0;
    bottom: 100%;
    transform: skewX(45deg);
}
.t::after {
    top: 0%;
    bottom: 0;
    transform: skewX(-45deg);
}
body{
  background: pink;
}