我想通过使用clip-path:polygon(…)创建一个指向css的三角形,并使用background-image:linear-gradient(…)在其上应用渐变.
这一切都很好,但我需要这个形状作为我的网页的背景.
它需要始终居中,并且需要剪切/剪切不适合浏览器窗口的左右边缘.三角形不应该重新缩放;我想保留三角形边缘的陡度,三角形的高度不应该改变:
如图所示,即使浏览器窗口太小而无法包含三角形,三角形也应保持相同的宽度和高度.
到目前为止,我有:
div.main-background {
position: absolute;
z-index: -1;
top: 0;
height: 500px;
width: 100%;
background-image: linear-gradient(to bottom,#65AAB0,#AEE2B6);
background-attachment: fixed;
background-position-x: center;
background-size: 1400px 500px;
clip-path: polygon(50% 80%,0 0,1400px 0);
}
但这显然是错误的.
最佳答案
你可以用SVG做到这一点
html,body {
margin: 0
}
svg {
width: 100%;
}
原文地址:https://www.jb51.cc/html/425656.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。