JSFiddle - React, Tailwind, and code Playground

HTML

<svg height="210" width="400" >
     <pattern id="fagl" patternUnits="objectBoundingBox" width="2" height="1" x="-50%">
        <path id="triangle1" d="M150 0 L75 200 L225 200 Z">
     </pattern>    
  <path id="triangle2" d="M150 0 L75 200 L225 200 Z" fill="url(#fagl)"/>
</svg>

CSS

#triangle1{
      fill: #0F0;
      fill-opacity:.3;
      stroke: #000;
      stroke-opacity: 0.5;
      stroke-width: 20;
    }

#triangle2{
      stroke: #f00;
      stroke-opacity: 1;
      stroke-width: 1;
    }