渐变的对角背景效果(渐变内的渐变)

时间:2017-07-28 09:59:44

标签: html css css3 css-shapes

我想将背景对角分割为两种颜色,其中一种是白色。我希望另一个是从红色到蓝色的渐变。

这里我们有红色分割,白色背景(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)

是否可以使红色部分成为渐变,从红色变为蓝色,如:

enter image description here

所以基本上是渐变中的渐变。

4 个答案:

答案 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;
&#13;
&#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; }将切断其余部分)在子元素上应用渐变。

&#13;
&#13;
<div class="shape">
  <div class="rotated">
    <div class="coloured"></div>
  </div>
</div>
&#13;
clip-path
&#13;
&#13;
&#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; },则可以使用一个元素,它具有较低的浏览器支持)

&#13;
&#13;
<div class="shape">
  <div class="child"></div>
</div>
&#13;
function myFunction() {
    var d = Date.parse("Jan 2011");
    document.getElementById("demo").innerHTML = d;
}
&#13;
&#13;
&#13;

这是它的工作原理:

enter image description here

答案 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 ?*/
}