- 更新 -

Question

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

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

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

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

Answer 1

- 更新 -

您可以通过调整.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; }来执行此操作。

＆＃13;

<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; }将切断其余部分）在子元素上应用渐变。

＆＃13;

<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; }，则可以使用一个元素，它具有较低的浏览器支持）

＆＃13;

<div class="shape">
  <div class="child"></div>
</div>

＆＃13;

function myFunction() {
    var d = Date.parse("Jan 2011");
    document.getElementById("demo").innerHTML = d;
}

＆＃13;

这是它的工作原理：

Answer 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;
}

基本上，主体具有水平渐变，然后伪元素变为白色三角形覆盖。

Answer 3

是的，你可以。使用给定的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%);

首先用渐变填充它然后剪辑它。

Answer 4

你还可以在彼此之上放置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 ?*/
}

渐变的对角背景效果（渐变内的渐变）

4 个答案:

- 更新 -