Diagonal gradient line in a div

Diagonal line in a div with a gradient

by kouty79

HTML

<div style='width: 95px; height: 55px; border: 1px solid black; position: relative;'>
<svg style='width: 100%; height: 100%; position: absolute;'>
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
    <line x1="0" y1="100%" x2="100%" y2="0"
        style="stroke:url(#grad1);stroke-width:2" />
</svg>
</div>