[英]Shape gradient in css
我花了数小时的努力使形状的梯度与拉拉卡斯的梯度相等。 实际上我的代码没有显示任何内容,有人可以帮我吗?
a{ background: linear-gradient(118deg,#328bf2,#1644ad); border-radius: 54% 46% 64% 36%/64% 42% 58% 36%; content: ""; position:absolute; top: -250px; left: 48%; width: 930px; height: 870px; }
<a></a>
我会为此考虑一些SVG,以便轻松创建形状的弯曲部分,然后将其应用为多个背景层的一部分:
.container { height: 100vh; background: linear-gradient(#fff,#fff) left/calc(100% - 100vh) 100% no-repeat, url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" ><path d="M0 64 L64 64 C60 50 56 46 29.33 50.83 C15.33 53.16 10.5 40.33 17.16 27.66 C20 11.66 16.33 6.5 0 0 Z" fill="white"/></svg>') right/auto 100% no-repeat, linear-gradient(118deg,#328bf2,#1644ad); } body { margin:0; }
<div class="container"> </div>
这是一个很好的在线工具,您可以在其中轻松调整形状:
只需附加当前路径即可对其进行编辑。
div
{
background-image: linear-gradient(to right bottom,
rgba((255, 0, 0, 0.8),.85),
rgba((255, 0, 0, 0.6), .85)
);
}
特别是在这里,您可以通过添加-“ to right bottom”关键字来指定渐变颜色的角度。 您也可以在sass中使用此方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.