我想将背景对角分割为两种颜色,其中一种是白色。我希望另一个是从红色到蓝色的渐变。
这里我们有红色分割,白色背景(source):
diff = [int(i) for i in tl_unique if int(i) not in yl_unique] # your element in yl is in integer and in tl it is string so I used int(i) to compare integer value of element in tl_unique
print(diff)
是否可以使红色部分成为渐变,从红色变为蓝色,如:
所以基本上是渐变中的渐变。
答案 0 :(得分:2)
您可以通过调整.shape {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.shape:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: red;
background: linear-gradient(110deg, red, violet, blue);
transform-origin: 0 100%;
transform: rotate(-20deg) scale(1.2,1.2);
bottom: 0;
left: 0;
}
来执行此操作。
<div class="shape"></div>
&#13;
overflow:hidden
&#13;
上一个答案
首先,通过旋转div然后沿相反方向旋转其子元素来创建倾斜形状。 (.shape {
width: 500px;
height: 300px;
overflow: hidden;
}
.rotated {
width: 100%;
height: 100%;
transform-origin: 0 100%;
transform: scale(1.5, 1.5) rotate(-20deg);
position: relative;
overflow: hidden;
}
.coloured {
position: absolute;
width: 100%;
height: 100%;
background: red;
background: linear-gradient(to right, red, violet, blue);
transform-origin: 0 0;
transform: rotate(20deg);
bottom: 0;
left: 0;
}
将切断其余部分)在子元素上应用渐变。
<div class="shape">
<div class="rotated">
<div class="coloured"></div>
</div>
</div>
&#13;
clip-path
&#13;
如果需要,您可以使用两个元素(如果您可以使用.shape {
width: 500px;
height: 300px;
overflow: hidden;
}
.child {
width: 100%;
height: 100%;
transform-origin: 0 100%;
transform: scale(1.5, 1.5) rotate(-20deg);
position: relative;
overflow: hidden;
}
.child:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: red;
background: linear-gradient(to right, red, violet, blue);
transform-origin: 0 0;
transform: rotate(20deg);
bottom: 0;
left: 0;
}
,则可以使用一个元素,它具有较低的浏览器支持)
<div class="shape">
<div class="child"></div>
</div>
&#13;
function myFunction() {
var d = Date.parse("Jan 2011");
document.getElementById("demo").innerHTML = d;
}
&#13;
这是它的工作原理:
答案 1 :(得分:2)
我已经设法在身体上使用伪元素。
在此处查看此行动:https://jsfiddle.net/q8az3u0g/
body:before {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 100vh 100vw;
border-color: transparent transparent #fff transparent;
}
基本上,主体具有水平渐变,然后伪元素变为白色三角形覆盖。
答案 2 :(得分:2)
是的,你可以。使用给定的css:
height:100vh;
width:100vw;
background:linear-gradient(90deg, red , purple 60%, blue 100%);
clip-path: polygon(0% 0%,100% 0%,100% 30%,0% 100%);
首先用渐变填充它然后剪辑它。
答案 3 :(得分:1)
你还可以在彼此之上放置2个渐变(我对此做出反应的关键词:渐变内的渐变)
body {
margin:0;
min-height: 100vh;
background:
linear-gradient(to bottom right, transparent 50%, white 50.25%), /* update direction and start/stop value to your needs */
linear-gradient(90deg, red, blue) white;
background-size:100% auto;
transition:0.5s
}
/* extra test*/
body:hover {
background-size: 125% auto;/* add some extra tunning to deg direction and size ?*/
}