水平线中的响应三角形

Question

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

下面是一个 hacky 代码片段，显示了我到目前为止所取得的成就。我的问题是它没有响应，我需要三角形的宽度跨越 window 宽度的 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

一种方法是对 border-width 使用 vw 单位。 vw 是相对于视口宽度的，这意味着边框将适应视口宽度为 increased/decreased。为确保三角形保持相同的形状，可以修改 top/bottom 边界以使用 vw 单位，这将确保三角形的 height 相对于它的 width。

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

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

从 hr

margin: 50px 0;

将 height: 16vw; 添加到 hr
在 hr:before[=55 上将 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 />

水平线中的响应三角形

Responsive triangles in a horizontal rule

css

responsive-design

responsive