JSFiddle - React, Tailwind, and code Playground

HTML

<div>qqqqqq а fsdf ываыв sdf  ыва ываыв fsdf</div>
<div>qqqqqq а fsdf</div>
<div>qqqqqq а fsdf ываыв fsdf </div>
<div>qqqqqq а fsfsdf </div>
<hr />

CSS

hr {
    margin:0;
    padding:0;
}
div{
    display:inline-block;
    position:relative;    
    background-color:red;
    overflow:hidden;
    max-width:10em;    
    padding-bottom:1.5em;
}
div:before,
div:after{
    content:"";
    display:block;
    position:absolute;
    top:100%;
    left:0;
    margin-top:-1.5em;
    width:100%;
    height:100%;
    background-color:white;
 }
div:before{
    transform-origin: left top;
    transform: rotate(15deg);
}
div:after{
    transform-origin: top right;
    transform: rotate(-15deg);
}