Я пытаюсь есть треугольник/стрелка внизу моего героя, но он не реагирует и не't работа на мобильных очень хорошо, так как треугольник плывет прочь к Право, и абсолютно не больше по центру.
Как я могу оставить треугольник, расположенный в абсолютном центре в нижней части div на все времена?
Пример кода:
HTML-код:
<div class="hero"></div>
Усс:
.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;
}
Может'т вы просто установите слева
до 50%
, а потом левое поле
Значение -25 пикселей
, чтобы учесть это's; ширина:
.hero:after {
content:'';
position: absolute;
top: 100%;
left: 50%;
margin-left: -50px;
width: 0;
height: 0;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
или если вам нужна ширина переменной, вы могли бы использовать:
1/.hero:after {
content:'';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
Вы можете использовать следующие CSS, чтобы сделать элемент среднего выровнены стиле с позиции: абсолютная`:
.element {
transform: translateX(-50%);
position: absolute;
left: 50%;
}
С помощью CSS имея только слева: 50%` мы будем иметь следующий эффект:
При объединении осталось: 50%с
преобразования: перевести(-50%) мы имеем следующее:
в
.hero {
background-color: #e15915;
position: relative;
height: 320px;
width: 100%;
}
.hero:after {
border-right: solid 50px transparent;
border-left: solid 50px transparent;
border-top: solid 50px #e15915;
transform: translateX(-50%);
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 50%;
height: 0;
width: 0;
}
<div class="hero">
</div>
в
Проверить это:
.hero1
{
width: 90%;
height: 200px;
margin: auto;
background-color: #e15915;
}
.hero2
{
width: 0px;
height: 0px;
border-style: solid;
margin: auto;
border-width: 90px 58px 0 58px;
border-color: #e15915 transparent transparent transparent;
line-height: 0px;
_border-color: #e15915 #000000 #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000')
}
Вы также можете использовать УСБ на "калькулятор", чтобы получить тот же эффект вместо использования отрицательной маржи или свойства преобразования (в случае, если вы хотите использовать эти свойства для всего остального).
.hero:after,
.hero:after {
z-index: -1;
position: absolute;
top: 98.1%;
left: calc(50% - 25px);
content: '';
width: 0;
height: 0;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
Я знаю, что это'т прямого ответа на ваш вопрос, но вы могли бы также рассмотреть возможность использования клип-путь, как в этот вопрос: https://stackoverflow.com/a/18208889/23341.