JSFiddle - React, Tailwind, and code Playground

HTML

<div class="triangle">

</div>

CSS

.triangle {
  width: 300px;
  height: 258px;
  
  -webkit-mask: 
    linear-gradient(to bottom right, #fff0 50%, red 0) left,
    linear-gradient(to bottom left , #fff0 50%, red 0) right;
  -webkit-mask-size: 50% 100%;
  -webkit-mask-repeat: no-repeat;
  background:linear-gradient(red,blue)
}