CSS div 的线性渐变,具有动态高度
CSS linear gradient for div with dynamic height
我需要创建这样的线性渐变 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.
的右上角
非常感谢任何帮助
您可以像下面这样编码:
.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>
我需要创建这样的线性渐变 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.
的右上角非常感谢任何帮助
您可以像下面这样编码:
.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>