本文介绍了具有动态高度的 div 的 CSS 线性渐变的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要创建这样的线性渐变渐变要求
I need to create a linear gradient like this Gradient requirement
我试图用这样的 css 来实现它:
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%);
这适用于特定的高度,但随着 div 的高度改变渐变的形状,如下所示 div 高度增加或减少时的问题.我希望渐变应该始终触及 div 的右上角.
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.
非常感谢任何帮助
推荐答案
你可以像下面这样编码:
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>
这篇关于具有动态高度的 div 的 CSS 线性渐变的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!