具有动态高度的 div 的 CSS 线性渐变 [英] CSS linear gradient for div with dynamic height
本文介绍了具有动态高度的 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 线性渐变的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文