响应三角？

Question

我有这样的事情在我的引导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>