Html div全宽底部的中心三角形

在CSS中尝试了几个小时后（对不起，我仍然是一个CSS noob），我请求您的帮助：
我希望在填充整个屏幕宽度时，三角形成为div的“底部”，而不管屏幕大小（100%）。
当窗口调整大小时，我只想让三角形改变它的宽度，使它仍然占据整个屏幕的宽度（100%），而不是高度。
目前，整个事情看起来是这样的（黑色三角形仅用于演示目的），从外观判断，这就是我想要实现的目标：

我的代码如下所示：

.top{
背景颜色：绿色；
高度：100px；
宽度：100%；
}
.底部{
背景色：红色；
高度：200px；
宽度：100%；
}
.三角形{
边框顶部：40px纯黑；
左边框：950px实心透明；
右边框：950px实心透明；
宽度：0；
身高：0；
顶部：107px；
内容：“；
显示：块；
位置：绝对位置；
溢出：隐藏；
左：0；
右：0；
保证金：自动；
}

请参见

---

CSS（相关变更）

左侧和右侧边界是用视口单位定义的（因为您的div是100%宽的）。三角形响应（尝试调整视口大小）

三角形位置定义为

底部：-40px

（而不是top），其父级具有

位置：相对这将确保三角形始终位于绿色元素的正下方（直到三角形的上边框
40px
高）

---

结果

---

您可以使用

vw

单位（视口宽度）

---

.

我不知道如何使三角形占据100%的屏幕大小（我现在使用的是像素宽度）。

这可以通过使用

vw

作为创建三角形的边界单位来实现。由于车身有

余量

（

8px

铬合金），因此使用

calc（50vw-8px）

来适应它

---

我不知道如何将三角形粘贴到div的精确底部（这里我也使用了一个像素值）。

通过添加

位置：相对，将
三角形
相对于
.top
定位到
.top
然后将
top:100%
添加到
.triangle
以始终将其放置在
.top
的底部

我既不知道如何相应地调整三角形的大小，也不知道如何在这样做时保持三角形的高度（我尝试了一些教程）。

vw
装置将使三角板响应


.top{
背景颜色：绿色；
高度：100px；
位置：相对位置；
宽度：100%；
}
.底部{
背景色：红色；
高度：200px；
宽度：100%；
}
.三角形{
左边框：calc（50vw-8px）实心透明；
右边框：calc（50vw-8px）实心透明；
边框顶部：40px纯黑；
内容：“；
显示：块；
身高：0；
左：0；
保证金：自动；
溢出：隐藏；
位置：绝对位置；
右：0；
最高：100%；
宽度：0；
}

这合适吗

*{
    padding: 0;
    margin: 0;
}
.top {
    background-color: green;
    height: 100px;
    width: 100%;
    position: relative;
}
.bottom {
    background-color: red;
    height: 200px;
    width: 100%;
}
.triangle {
    box-sizing: border-box;
    width: 0; 
    height: 0; 
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
    position: absolute;
    top: 100px;
    border-top: 30px solid black;
}

另一种方法是对多边形元素使用

这样，它的宽度可以设置为100%，它的高度可以通过svg属性的CSS thx独立控制

在下面的示例中，三角形的高度固定为40px，但是您可以通过删除CSS height属性和
preserveSpectratio
属性，使高度根据宽度重新调整


.top{
位置：相对位置；
背景颜色：绿色；
高度：100px；
宽度：100%；
}
.底部{
背景色：红色；
高度：200px；
宽度：100%；
}
.三角形{
位置：绝对位置；
最高：100%；
宽度：100%；
高度：40px；
}
三角形也可以通过以下方式创建：


.top{
背景颜色：绿色；
高度：100px；
位置：相对位置；
}
.三角形{
位置：绝对位置；
左：0；
右：0；
最高：100%；
高度：40px；
背景：
线性渐变（左下角，rgba（0,0,0,1）50%，rgba（0,0,0,0）50%）不重复左上角/50%100%，
线性梯度（至右下角，rgba（0,0,0,1）50%，rgba（0,0,0,0）50%）无重复右上角/50%100%；
}
.底部{
背景色：红色；
高度：200px；
}

vw
方法有一个问题：当内容对于垂直滚动条来说足够高时，水平滚动条也会出现一个好点，但不幸的是，边框不能用
%
单位设置。我会考虑使用<代码>溢出：隐藏
可以解决这个问题，但是三角形会被稍微剪掉。很抱歉回答得太晚，我正在度假。非常感谢您提出的令人敬畏的解决方案以及您为此付出的努力（也感谢所有其他人）！
*{
    padding: 0;
    margin: 0;
}
.top {
    background-color: green;
    height: 100px;
    width: 100%;
    position: relative;
}
.bottom {
    background-color: red;
    height: 200px;
    width: 100%;
}
.triangle {
    box-sizing: border-box;
    width: 0; 
    height: 0; 
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
    position: absolute;
    top: 100px;
    border-top: 30px solid black;
}