html – 创建水平居中的背景图像渐变三角形

发布时间：2020-12-14 22:41:17 所属栏目：资源来源：网络整理

导读：我想通过使用clip-path：polygon()创建一个指向css的三角形,并使用background-image：linear-gradient()在其上应用渐变. 这一切都很好,但我需要这个形状作为我的网页的背景. 它需要始终居中,并且需要剪切/剪切不适合浏览器窗口的左右边缘.三角形不应该重新缩

我想通过使用clip-path：polygon(…)创建一个指向css的三角形,并使用background-image：linear-gradient(…)在其上应用渐变.

这一切都很好,但我需要这个形状作为我的网页的背景.

它需要始终居中,并且需要剪切/剪切不适合浏览器窗口的左右边缘.三角形不应该重新缩放;我想保留三角形边缘的陡度,三角形的高度不应该改变：

enter image description here

如图所示,即使浏览器窗口太小而无法包含三角形,三角形也应保持相同的宽度和高度.

到目前为止,我有：

    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%;
}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!