使用SVG的线性双色平滑和锐利的渐变
Gar*_*eld 1 html javascript html5 svg css3
我尝试了所有的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绘制一个三角形从开始(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);
}
}
您可以使用pathSVG中的两个元素实现此目的,然后根据需要为它们提供填充.
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>- 尽管渐变在某些维度上呈锯齿状，但对于浅色，我看到它非常微小。@Harry，这是非常简单且很好的答案。谢谢 (2认同)
| 归档时间： |
|
| 查看次数： |
905 次 |
| 最近记录： |