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

我想通过使用

剪辑路径：多边形（…）

在css中创建一个指向下方的三角形，并使用

背景图像：线性渐变（…）

在其上应用渐变

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

它需要始终居中，并且需要剪裁/剪切不适合浏览器窗口的左右边缘。三角形不应重新缩放自身；我希望保持三角形边的陡度，并且三角形的高度不应改变：

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

到目前为止，我已经：

div.main-background{
位置：绝对位置；
z指数：-1；
排名：0；
高度：500px；
宽度：100%；
背景图像：线性渐变（至底部，#65AAB0，#AEE2B6）；
背景附件：固定；
背景位置x：中心；
背景尺寸：1400px 500px；
剪辑路径：多边形（50%80%，0.0，1400px 0）；
}

---

您可以使用SVG实现这一点

html，
身体{
保证金：0
}
svg{
宽度：100%；
}

---

使用视口单位，这是您想要的吗？对任何决议都有效

div.main-background{
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
右：0；
身高：35.71vw；
背景图像：线性渐变（至底部，#65AAB0，#AEE2B6）；
背景附件：固定；
背景位置：中心；
剪辑路径：多边形（50%80%，0.0，100vw 0）；
}

---

也许你可以用CSS和

后面的
伪元素来使用这种技巧：


正文{
溢出：隐藏；
}
.向下箭头{
--w:800px；
--h:300px；
位置：相对位置；
宽度：var（--w）；
高度：var（--h）；
左边距：50%；
转换：转换（-50%，0）；
背景图像：线性渐变（至底部，#65AAB0，#AEE2B6）；
}
.向下箭头：：之后{
内容：''；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
边框：纯白；
边界宽度：计算（var（--h）/2）计算（var（--w）/2；
边框顶色：透明；
}
您可以尝试以下多种背景。我制作的三角形的宽度为
600px
，高度为
300px
，可以轻松调整


正文{
背景：
线性梯度（至右下角，透明49.8%，#fff 50%）计算（50%+150px）0/300px 300px，
线性梯度（至左下角，透明49.8%，#fff 50%）计算（50%-150px）0/300px 300px，
线性梯度（至底部，#65AAB0，#AEE2B6）顶部中心/600px 300px；
背景重复：无重复；
}
你走错了路。您的
div
不包含任何内容，因此只是装饰性的垃圾。如果您想要具有特定外观的页面背景，那么无论背景应该具有何种外观，都会进入文档元素的
background
属性（通常是
body
，或
html
）

摆脱无用的
div.main-background
，它没有任何用途，使用以下背景图像，可以是独立的（在它自己的SVG文件中），也可以是使用
数据内联的：
URI：

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1">
    <polygon fill="lime" points="0,0 0.5,0.4 1,0" />
</svg>

或者，您可以使用一个独立的SVG文件，那么您的
background
规则将不同：

background: url(<URL-of-SVG-file>);

background:url（）；

您可以通过编辑SVG内容轻松添加渐变，这是SVG的一个基本功能，这里的另一个答案甚至演示了如何添加渐变。
这肯定更好，但我希望不要缩放三角形，而只是修剪/剪裁不再适合新浏览器宽度的左右区域。所以三角形的高度应该是一样的。我喜欢，但是有没有办法保持三角形的高度不变？它似乎会自行缩放，这是一个问题。有没有办法改变多边形的大小？我需要非常宽（比如1200px和400px），但是我不知道如何使用代码。是的，您可以更改
的
视图框和
的点属性。谢谢！我已经试过了，但是如果我需要非常大的宽度，比如说1920像素以适应大多数屏幕，我会怎么做呢？我尝试将
120
值更改为
200
认为这意味着2000px，但随后它中断了（不再居中）。我再次编辑了答案，以使用对您更有意义的值。但它没有居中，而且正在扩展这看起来非常有希望。我很难让它在我的部门（而不是身体）工作，但我不会放弃。会让你知道我的进展的，泰。@Mayron确保你的div有一个定义的高度，或者足够高以容纳背景如果三角形的高度不应该改变，三角形也不应该像你所说的那样重新缩放，那么您所表达的实际上是要求三角形具有恒定的纵横比，高度或宽度定义为
em
，
px
或其他不依赖于视口尺寸的单位。@amn是的，这似乎是正确的。谢谢您的建议。在您的示例中，是否有设置三角形的确切宽度和高度的方法？我改变了
背景尺寸：40em
到
背景尺寸：1200px 400px
认为这会将宽度更改为1200px，高度更改为400px，但所做的只是将其变小。等等--我以为您想要原始纵横比？为什么要为背景大小指定两个值？您正在非均匀地缩放背景图像。如果要使图像渲染得更小，请提供一个小于
40em
的值。如果你
background: url(<URL-of-SVG-file>);