CSS linear gradient for div with dynamic height

user_1765738 0
Viewed 159

I need to create a linear gradient like this Gradient requirement

I am trying to achieve it with css like this:

background: linear-gradient(-60deg,
          rgba(255,183,107,1) 0%,
          rgba(255,167,61,1) 15%,
          rgba(255,124,0,1) 15%,
          rgba(255,127,4,1) 100%);

This works for a specific height, but as the height of the div changes the shape of gradient changes as shown here Issue when height of div increases or decreases. I want that the gradient should always touch the top right corner of div.

Any help is highly appreciated

responsive-design linear-gradients frontend gradient css
1 Answers

You can code it like below:

.box {
  height:100px;
  background: 
    linear-gradient(to bottom right,#0000 50%,rgba(255,183,107,1) 50.1%) 
        top right /1000px 1730px no-repeat /* 1.73 = tan(60deg) */
    rgba(255,127,4,1);
    
    /* resize and see the result*/
    resize:both;
    overflow:hidden;
}
<div class="box"></div>

user_86203330
Related