JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button">This is one line</div>
<div class="button">This is <br />two lines</div>
<div class="button">This is <br />three<br /> lines</div>

CSS

.button {
  background: #000;
  float: left;
  position: relative;
  color: #999;
  font: 18px/130% Arial, sans-serif;
  padding: 10px;
  clear: both;
  margin: 10px;
}

.button:hover {
  color: #fff;
}

.button:after {
  content: '';
  display: block;
  width: 10px;
  position: absolute;
  right: -10px;
  height: 100%;
  top: 0;
  background: transparent url('data:image/svg+xml; charset=utf-8,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 20" preserveAspectRatio="none"><path d="m0,0 l10,10 l-10,10 l-0,-20z" stroke-width="1.5" fill="#000"/></svg>') 0 0 no-repeat;
}