Question

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

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

而不是使用height height等于hr的两个三角形可用于margin: 50px 0;，这样可以更轻松地定位三角形并确保为他们分配了足够的空间（因此他们不会与其他元素重叠）。

为实现此目的，需要进行以下修改：

从hr

height: 16vw;

将hr添加到border-width: 50px 200px 0 0;
在border-width: 8vw 25vw 0 0;

top: 25px;

bottom: 0;

left: calc(50% - 200px);

right: 50%;

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;
}

＆＃13;

<hr />

＆＃13;

str.format

＆＃13;

水平规则中的响应三角形

1 个答案: