我尝试了所有 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 查询来调整每个尺寸的旋转。
我认为如果我们可以在这个 div 上使用 SVG 绘制一个三 Angular 形，从 (0, 0) 到 (body width, body height) 我真的可以制作响应式线性渐变。
但是我对 SVG 很陌生，如何使用 SVG 实现响应式倒直 Angular 三 Angular 形？
In short, I want a responsive two colored
smooth &sharpgradient background.
更新:
完整的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);
}
}
最佳答案
您可以使用 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] 语法的渐变来做到这一点。但正如您所说，当尺寸较高时，它确实会沿对 Angular 线产生锯齿状边缘。
.bg {
background: linear-gradient(to top right, red 50%, green 50%);
height: 100vh;
width: 100%;
}<div class="bg"></div>关于javascript - 使用 SVG 的线性双色平滑和锐利渐变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35575544/