JSFiddle - React, Tailwind, and code Playground

HTML

<div id="triangle-topleft"></div>

CSS

#triangle-topleft {
  
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='230' height='140'><polygon points='5,135 115,5 225,135' fill='violet'/></svg>")  no-repeat;
  height: 250px;
background-size: 100% 140px;
}