响应三角形？答案

【问题标题】：Responsive triangle?响应三角形？
【发布时间】：2015-09-25 17:25:33
【问题描述】：

我的 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。

【问题讨论】：

如果您将这些值更改为，例如，使用 viewport width uniut 而不是像素 (vw)，应该可以。

标签： html css twitter-bootstrap css-shapes

【解决方案1】：

简单地将px 单元替换为基于视口的响应单元。例如，您可以使用vw（视口宽度）单位，它表示视口的宽度除以 100。不要使用%，因为它们对垂直轴和水平轴使用不同的值，但如果您使用@ 987654324@ 或vh（甚至vmin 或vmax）你会得到一个响应三角形。请参阅下面的 sn-p，尽管我对这些值进行了一些修改，以便它们显示得更好，并且您可以调整屏幕大小并注意到其中一个实际上正在调整大小！

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

【讨论】：

这实际上是我第一次使用vw 单位。将更多地了解它。谢谢你的回答！