线性双色平滑&使用SVG的锐梯度 [英] Linear two color smooth & sharp gradient using SVG
问题描述
我尝试了所有的CSS技巧，为我的 body 标签做如下线性渐变。
I tried all the CSS tricks to make the linear gradient as follows for my body tag.
a href =https://i.stack.imgur.com/zKyzF.png =nofollow noreferrer>
但CSS渐变并不尖锐，所以我尝试了如下的技巧，
but the CSS gradient is not sharp, so I tried the trick as follows,
<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.
但我必须写 media 查询来调整每个尺寸的旋转。
But I have to write media queries to adjust the rotation for each size.
我想如果我们可以使用SVG在这个div上绘制一个三角形，从（0,0）开始 （body width，body height）我真的可以做出响应线性渐变。
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.
新的到SVG，如何使用SVG实现响应的逆直角三角形？
But I am very new to SVG, how can I achieve the responsive inverse right angle triangle using SVG?
总之， c $ c>平滑&
尖锐渐变背景
In short, I want a responsive two colored
smooth &sharpgradient background.
更新：
完成css代码在这里。
Complete css code is here.
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 元素来实现这一点，然后根据需要给它们填充。
You can achieve this with two path elements in SVG and then give them the fill as required.
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)
你可以用一个使用到[side] [side] 语法的渐变来做到这一点。
You can do this with just a gradient which uses the to [side] [side] syntax. 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>
这篇关于线性双色平滑&使用SVG的锐梯度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
