Question

我的Bootstrap HTML中有这样的东西（可能，它只是一个向下的低三角形）：

<div class="col-md-10 col-md-offset-1">
  <div class="triangle"></div>
</div>

CSS的工作原理如下：

.triangle {
  margin-top:-1px;
  height: 60px;
  border-style: solid;
  border-width: 80px 778px 0 778px;
  border-color: #332638 transparent transparent transparent;
}

但这没有回应。我的意思是在移动屏幕上，这个三角形仍然保持相同的大小（因为它以像素为单位，显而易见）并保持水平滚动。

问题是：是否可以使其响应？我知道答案很接近，但我仍然不是专家，只是想弄明白。

谢谢！：）

顺便说一下，这是fiddle。

Answer 1

使用基于视口的响应单元简单替换px单元。例如，您可以使用vw（视口宽度）单位，该单位表示视口的宽度除以100.不要使用%，因为它们对垂直轴和水平轴使用不同的值'，但是如果您使用vw或vh（或甚至vmin或vmax），您将获得响应三角形。请参阅下面的代码段，虽然我已经修改了一些值，因此它们显示得更好，您可以调整屏幕大小并注意其中一个实际上正在调整大小！

.triangle {
  margin-top:-1px;
  width: 6px;
  height: 6px;
  border-style: solid;
  border-width: 8px 77px 0 77px;
  border-color: #332638 transparent transparent transparent;
}

.triangle-responsive {
  margin-top:-1px;
  width: .6vw;
  height: .6vw;
  border-style: solid;
  border-width: .8vw 7.78vw 0 7.78vw;
  border-color: #332638 transparent transparent transparent;
}

<div class="triangle"></div>

<div class="triangle-responsive"></div>

响应三角形？

1 个答案: