css - 水平线中的响应三 Angular 形

Question

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

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

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

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

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

与其使用 margin，不如使用等于两个三 Angular 形的 height 的 height 可以用于 hr，这样可以更轻松地定位三 Angular 形并确保为它们分配足够的空间(因此它们不会与其他元素重叠)。

为此需要进行以下修改:

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

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 />