Отзывчивый треугольник?

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

Но это не отзывчивый. Я имею в виду, что на мобильных экранах этот треугольник по-прежнему сохраняет одинаковый размер (поскольку он находится в пикселях, obvioulsy) и сохраняет горизонтальную прокрутку.

Вопрос в следующем: возможно ли это реагировать? Я знаю, что ответ где-то рядом, но я все еще не эксперт, просто пытаюсь понять это.

Спасибо! :)

Это, кстати, 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>