Css 水平规则中的响应三角形

我正在尝试创建一个奇特的几何外观水平规则。它由两个三角形组成，两个三角形的点在页面中心相交

下面是一段黑客代码片段，展示了我迄今为止所取得的成就。我的问题是它没有响应，我需要三角形的宽度跨越窗口宽度的50%。另外，当我不得不使用

calc

时，我会发抖

我能想到的实现我想要的东西的唯一方法是使边框宽度变大，然后粘贴一个

overflow-x:hidden在容器上，但我相信一定有更好的方法来实现这一点。可能使用某种类型的
歪斜


hr{
位置：相对位置；
边界：无；
利润率：50px0；
}
人事：以前{
内容：“；
边框样式：实心；
边框宽度：50px200px0；
边框颜色：蓝色透明；
位置：绝对位置；
左：计算（50%-200px）；
顶部：25px；
}
人力资源部：之后{
内容：“；
边框样式：实心；
边框宽度：0.50px 200 px；
边框颜色：透明红色透明；
位置：绝对位置；
左：50%；
顶部：-25px；
}
一种方法是对
边框宽度使用
vw
单位
vw
与视口的宽度相关，这意味着随着视口宽度的增加/减少，边框将自适应。为了确保三角形保持相同的形状，可以修改上/下边框以使用
vw
单位，这将确保三角形的
高度
与其
宽度
相关

与使用
margin
a
height
相同的
height
可以用于
hr
，这样可以更容易地定位三角形，并确保为它们分配足够的空间（因此它们不会与其他元素重叠）

为此，需要进行以下修改：


删除
页边距：50px 0来自
hr

增加高度：16vw至
hr
更改
边框宽度：50px 200px 0至
边框宽度：8vw 25vw 0，
顶部：25px至
底部：0和
左侧：计算（50%-200px）至<代码>右侧：50%在<代码>人力资源：在

更改
边框宽度：0 50px 200px至
边框宽度：0 0 8vw 25vw和
顶部：-25px到<代码>顶部：0在<代码>人力资源：在



hr{
位置：相对位置；
边界：无；
高度：16vw；
}
人事：以前{
内容：“；
边框样式：实心；
边框宽度：8vw 25vw 0；
边框颜色：蓝色透明；
位置：绝对位置；
右：50%；
底部：0；
}
人力资源部：之后{
内容：“；
边框样式：实心；
边框宽度：0 0 8vw 25vw；
边框颜色：透明红色透明；
位置：绝对位置；
左：50%；
排名：0；
}