JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div>SOME TEXT</div>

<div>SOME TEXT<br/>
    MORE TEXT
</div>

CSS

div{
    width:20%;
    line-height:50px;
    position:relative;
    background:red;
    text-align:center;
    margin:50px auto;
}
div:after, div:before{
    content:"";
    position:absolute;
    width:20px;
    height:50%;
    left:100%;
}
div:after{
    bottom:0;
    background: linear-gradient(to right bottom, red 50%, transparent 50%);
}
div:before{
      top:0;
    background: linear-gradient(to right top, red 50%, transparent 50%);
}