JSFiddle - React, Tailwind, and code Playground

HTML

<svg height="32" width="100">
    <defs>
        <clipPath id="arrow-button">
            <polygon points="0,0 84,0 100,16 84,32 0,32" />
        </clipPath>
    </defs>
    <foreignObject x="0" y="0" height="32" width="100" clip-path="url(#arrow-button)">
        <div xmlns="http://www.w3.org/1999/xhtml" class="button">Button</div>
   </foreignObject>
</svg>

CSS

.button {
    background: linear-gradient(red, blue);
    height: 32px;
    line-height: 32px;
    color: white;
    padding-left: 8px;
}