響應三角？

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>