JSFiddle - React, Tailwind, and code Playground

by Paulie_D

HTML

<span>Short Text</span>
<span>Longer Text</span>
<span>Lorem ipsum dolor sit amet.</span>

CSS

span {
    display: inline-block;
    position: relative;
    line-height: 1.2em;
    padding: 0 .5em;
    background: orange;
    margin: 2em; /* just spacing */
    position: relative;
}

span:before,
span:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border:.6em solid transparent;
}

span:before {
    right:100%;
    border-right-color:orange;
}

span:after {
    left:100%;
    border-left-color:orange;
}

span:nth-of-type(3) {
    font-size:200%;
}