使用SVG的线性两种颜色的平滑和清晰渐变

Question

I tried all the CSS tricks to make the linear gradient as follows for my body tag. 我尝试了所有的CSS技巧，使线性渐变我如下body标记。

but the CSS gradient is not sharp, so I tried the trick as follows, 但是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) 
}

So, I achieved the green rectangle. 因此，我实现了绿色矩形。 I can now see the sharp gradient. 我现在可以看到陡峭的渐变。

But I have to write media queries to adjust the rotation for each size. 但是我必须编写media查询来调整每种尺寸的旋转。

And I thought that if we can draw a triangle using SVG on this div starting from (0, 0) to (body width, body height) I could really make a responsive linear gradient. 而且我认为，如果我们可以在该div上使用SVG从(0, 0)到(body width, body height)绘制一个三角形，那么我真的可以做出一个响应线性渐变。

But I am very new to SVG, how can I achieve the responsive inverse right angle triangle using SVG? 但是我对SVG还是很陌生，如何使用SVG实现响应的反直角三角形？

In short, I want a responsive two colored smooth & sharp gradient background. 简而言之，我想要一个响应式的两种颜色的smooth & sharp渐变背景。

Update: 更新：

Complete css code is here. 完整的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

You can achieve this with two path elements in SVG and then give them the fill as required. 您可以使用SVG中的两个path元素来实现此目的，然后根据需要为其填充。

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

 <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>

Original Answer: (missed reading the not smooth part due to oversight) 原始答案：（由于疏忽忽略了阅读不流畅的部分）

You can do this with just a gradient which uses the to [side] [side] syntax. 您可以仅使用使用to [side] [side]语法的渐变来完成此操作。 But as you've said, it does produce jagged edges along the diagonal lines when the dimensions are high. 但是正如您已经说过的，当尺寸较大时，它的确会沿对角线产生锯齿状的边缘。

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

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

Answer 2

The simple way to produce the SVG you want is probably with Harry's approach - with two triangles - or a triangle on top of a rectangle. 生成所需SVG的简单方法可能是使用Harry的方法-具有两个三角形-或在矩形顶部的三角形。

However, it can be done with a gradient as well. 但是，也可以使用渐变来完成。 One advantage of this approach is that you don't get any anti-aliasing issues where the edges of the two colours coincide. 这种方法的一个优势是，在两种颜色的边缘重合的情况下，您不会遇到任何抗锯齿问题。

 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>

使用SVG的线性两种颜色的平滑和清晰渐变

问题描述

2 个解决方案

解决方案1
5 已采纳 2016-02-23 11:11:26

解决方案2
3 2016-02-23 11:44:22

使用SVG的线性两种颜色的平滑和清晰渐变

问题描述

2 个解决方案

解决方案1 5 已采纳 2016-02-23 11:11:26

解决方案2 3 2016-02-23 11:44:22

解决方案1
5 已采纳 2016-02-23 11:11:26

解决方案2
3 2016-02-23 11:44:22