Question

我尝试了所有CSS技巧，为我的body标记制作了如下线性渐变。

但CSS渐变并不清晰，所以我尝试了如下技巧，

<body><div class="bg"></div></body>

.bg{ 
  background-color:red; 
  width:3000px; 
  height:3000px;
  overflow:hidden
} 
.bg:before{ 
  left: 7%; 
  top:-20%; 
  width:100%; 
  height:100%; 
  transform:rotate(25deg) 
}

所以，我实现了绿色矩形。我现在可以看到尖锐的渐变。

但我必须编写media个查询来调整每个尺寸的旋转。

我认为如果我们可以使用SVG在这个div上绘制一个三角形，从(0, 0)开始到(body width, body height)我真的可以做出响应线性渐变。

但我对SVG很新，如何使用SVG实现响应式反直角三角形？

简而言之，我想要一个响应式的双色smooth & sharp 渐变背景。

更新

完整的css代码就在这里。

div.bg {
  margin-top: -50px;
  position: fixed;
  height: 1500px;
  width: 3500px;
  overflow: hidden;
  background-color: @bg-gradient-color-1;
  background-size: cover;
  z-index: -999999;
}

.bg:before {
  content: '';
  position: fixed;
  width: 200%;
  height: 200%;
  background-color: @bg-gradient-color-2;
  z-index: -999999;
}

@media only screen and (min-width: 1320px) {
  .bg:before {
    left: 0%;
    top: -106%;
    transform: rotate(27deg);
  }
}

Answer 1

您可以使用SVG中的两个path元素实现此目的，然后根据需要为其填充。

＆＃13;

svg path#green {
  fill: green;
}
svg path#red {
  fill: red;
}
div.bg {
  position: relative;
  height: 100vh;
  width: 100%;
}
div.bg svg {
  position: absolute;
  height: 100%;
  width: 100%;
}

＆＃13;

<div class='bg'>
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <path d='M0,0 L100,100 100,0z' id='green' />
    <path d='M0,0 L0,100 100,100z' id='red' />
  </svg>
</div>

＆＃13;

原文答案：（由于疏忽而错过了 not smooth 部分）

只需使用to [side] [side]语法的渐变即可完成此操作。但正如你所说的那样，当尺寸很高时，它会产生沿对角线的锯齿状边缘。

＆＃13;

.bg {
  background: linear-gradient(to top right, red 50%, green 50%);
  height: 100vh;
  width: 100%;
}

＆＃13;

<div class="bg"></div>

＆＃13;

Answer 2

生成所需SVG的简单方法可能是使用Harry的方法 - 使用两个三角形 - 或在矩形顶部使用三角形。

但是，它也可以用渐变来完成。这种方法的一个优点是，在两种颜色的边缘重合的情况下，您不会遇到任何抗锯齿问题。

svg stop.color1 {
  stop-color: green;
}
svg stop.color2 {
  stop-color: red;
}
div.bg {
  width: 100vw;
  height: 60vw;
}
div.bg svg {
  width: 100%;
  height: 100%;
}

<div class='bg'>
  <svg viewBox='0 0 100 100' preserveAspectRatio="none">
    <defs>
      <linearGradient id="grad" x2="1" y2="1">
        <stop offset="0.5" class="color1"/>
        <stop offset="0.5" class="color2"/>
      </linearGradient>
    </defs>
    <rect width="100" height="100" fill="url(#grad)"/>
  </svg>
</div>

线性双色光滑＆amp;使用SVG进行锐利渐变

2 个答案: