具有动态高度的 div 的 CSS 线性渐变答案

【问题标题】：CSS linear gradient for div with dynamic height具有动态高度的 div 的 CSS 线性渐变
【发布时间】：2021-07-12 22:52:22
【问题描述】：

我需要创建一个像这样的线性渐变Gradient requirement

我正在尝试使用这样的 css 来实现它：

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%);

这适用于特定高度，但随着 div 高度的变化，渐变的形状也会发生变化，如Issue when height of div increases or decreases 所示。我希望渐变应该始终触及 div 的右上角。

非常感谢任何帮助

【问题讨论】：

标签： css responsive-design frontend gradient linear-gradients

【解决方案1】：

你可以像下面这样编码：

.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;
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：