水平规则中的响应三角形

Question

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

下面是一个 hacky 代码 sn-p 显示了我到目前为止所取得的成就。我的问题是它没有响应，我需要三角形的宽度跨越窗口宽度的 50%。另外，当我不得不使用calc 时，我感到不寒而栗。

我想实现我想要的唯一方法是使边框宽度变大，然后在容器上粘贴overflow-x: hidden;，但我确信必须有更好的方法来做到这一点。可能使用某种skew？

hr {
  position: relative;
  border: none;
  margin: 50px 0;
}
hr:before {
  content: "";
  border-style: solid;
  border-width: 50px 200px 0 0;
  border-color: blue transparent transparent transparent;
  position: absolute;
  left: calc(50% - 200px);
  top: 25px;
}
hr:after {
  content: "";
  border-style: solid;
  border-width: 0 0 50px 200px;
  border-color: transparent transparent red transparent;
  position: absolute;
  left: 50%;
  top: -25px;
}

<hr />

Answer 1

一种方法是将vw 单位用于border-width。 vw 与视口的宽度相关，这意味着边框将随着视口宽度的增加/减少而适应。为了确保三角形保持相同的形状，可以修改顶部/底部边界以使用vw 单位，这将确保三角形的height 相对于它的width。

而不是使用margin 和height 等于两个三角形中的height 可以用于hr，这样更容易定位三角形并确保为它们分配足够的空间（所以它们不与其他元素重叠）。

要实现这一点，需要进行以下修改：

• 从hr 中删除margin: 50px 0;
• 将height: 16vw; 添加到hr
• 在hr:before 上将border-width: 50px 200px 0 0; 更改为border-width: 8vw 25vw 0 0;，top: 25px; 更改为bottom: 0; 和left: calc(50% - 200px); 更改为right: 50%;
• 在hr:after 上将border-width: 0 0 50px 200px; 更改为border-width: 0 0 8vw 25vw; 并将top: -25px; 更改为top: 0;

hr {
  position: relative;
  border: none;
  height: 16vw;
}

hr:before {
  content: "";
  border-style: solid;
  border-width: 8vw 25vw 0 0;
  border-color: blue transparent transparent transparent;
  position: absolute;
  right: 50%;
  bottom: 0;
}

hr:after {
  content: "";
  border-style: solid;
  border-width: 0 0 8vw 25vw;
  border-color: transparent transparent red transparent;
  position: absolute;
  left: 50%;
  top: 0;
}

<hr />