JSFiddle - React, Tailwind, and code Playground

HTML

<svg height=10 width=20>
      <polygon fill=red stroke-width=0 
         points="0,10 20,10 10,0" />
  </svg>

<div class="triangle"></div>

CSS

.triangle {
    background: url("data:image/svg+xml;charset=utf-8,<svg height='10' width='20'  xmlns='http://www.w3.org/2000/svg'><polygon fill='red' stroke-width='0' points='0,10 20,10 10,0' /></svg>") no-repeat left center;
    width: 20px;
    height: 10px;
}