JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div>
  <svg viewbox="0 0 200 100" class="svg">
    <g>
      <polygon points="200,0 200,100 100,100" fill="url(#grad1)"  />
      <text x="150" y="150" class="text"  transform="rotate(-45 80,110)" > PLAY </text>
    </g>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#ff5309;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#ffb400;stop-opacity:1" />
    </linearGradient>
  </svg>
</div>

CSS

.svg{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
}
div{
  width:300px;
  height:200px;
  margin:auto;
  border:1px solid #000;
  position:relative;
}

.text{
  font-family:"Verdana";
  font-size:20px;
  fill:#fff;
  
}