JSFiddle - React, Tailwind, and code Playground

HTML

<span class="text-block">
    <span class="text">
        Skiba-de-dabba-de-dabba-do
    </span>
</span>

<span class="text-block">
    <span class="text">
        Small
    </span>
</span>

<span class="text-block">
    <span class="text">
        Slightly Bigger
    </span>
</span>

CSS

body {
    padding:10px;
    font: 13px Arial;
}

.text-block { 
    overflow: hidden;
    height: 45px;
    display: inline-block;
    postion: relative;
}

.text:before {
    position: absolute;
    content: '';
    left: -35px;
    top: 0;
    bottom: 0;
    width: 45px;
    height: 45px;
    background: #fff;
    display: block;
    -webkit-transform: rotateZ(-9deg);
}

.text:after {
    position: absolute;
    content: '';
    right: -33px;
    top: 0;
    bottom: 0;
    width: 45px;
    height: 45px;
    background: #fff;
    display: block;
    -webkit-transform: rotateZ(11deg);
}

.text {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    background: #cc1100;
    color: #fff;
    position: relative;
    top: -5px;
    -webkit-transform: rotateZ(-3deg);
    padding: 0 30px;
}