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

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
span {
    display: inline-block;
    position: relative;
    line-height: 1.2em;
    padding: 0 .5em;
    background: orange;
    margin: 2em;
    /* just spacing */
    position: relative;
    border-top:2px solid green;
    border-bottom:2px solid green;
}
span:before, span:after {
    content:'';
    position: absolute;
    top:-2px; /* magic number = border width */
    width: 1.2em;
    height: 1.2em;
    background: inherit;
    transform-origin:center;
    z-index:-1;
    border:2px solid green;
}
span:before {
    right:100%;
    transform: translateX(50%) rotate(45deg) scale(0.707);
}
span:after {
    left:100%;
    transform: translateX(-50%)rotate(45deg) scale(0.707);
}
span:nth-of-type(3) {
    font-size:200%;
}