使用SVG的线性两色平滑和尖锐的渐变

我尝试了所有的CSS技巧，使我的body标记的线性渐变如下。使用SVG的线性两色平滑和尖锐的渐变

但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查询来调整每个大小的旋转。

而且我认为如果我们可以在这个div上使用SVG绘制一个三角形，从(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); 
    } 
}

来源

2016-02-23 Garfield

你的意思，是这样的：http://www.colorzilla.com/gradient-editor/#ff070b+0,00db15+100 - 没有必要只使用SVG对于请求的梯度 – birdspider

我试过它birdspider，它不响应，不顺利使用完整的身体标记 – Garfield

您发布的代码并没有真正做任何事情，但创建一个大的红色正方形。而且你发布的图片根本不会显示“渐变”。也许你已经忘记了一些东西。 – Scott

您可以在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>

原来的答案：（漏读的并不顺利部分原因是由于疏忽）

你可以只用一个梯度做到这一点，它使用to [side] [side]句法。但正如你所说的，当尺寸很大时，它确实会在对角线上产生锯齿状的边缘。

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

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

来源

2016-02-23 11:11:26 Harry

它完美的作品 – Garfield

尽管渐变在一些尺寸上锯齿状，但对于浅色，我可以看到它非常细微。 @哈里，这是最简单最好的答案。谢谢 – Garfield

不幸的是，在不同的宽度或不同的浏览器上，这并不总是平滑/反锯齿。根据浏览器的角度和宽度，Safari和Chrome似乎具有锯齿边框。有时光滑，有时不光滑。 –

简单的方法来生成所需的SVG可能是哈利的做法 - 用两个三角形 - 或长方形顶部的三角形。

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

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>

来源

2016-02-23 11:44:22

使用SVG的线性两色平滑和尖锐的渐变

回答

相关问题