Я пытаюсь иметь треугольник/стрелу внизу моего героя, но он не реагирует и не работает на мобильном телефоне очень хорошо, так как треугольник плавает вправо и больше не центрируется.
Как я могу всегда удерживать треугольник в абсолютном центре в нижней части div?
Пример кода здесь:
HTML:
<div class="hero"></div>
CSS
.hero {
position:relative;
background-color:#e15915;
height:320px !important;
width:100% !important;
}
.hero:after,
.hero:after {
z-index: -1;
position: absolute;
top: 98.1%;
left: 70%;
margin-left: -25%;
content: '';
width: 0;
height: 0;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}