Треугольник-центр на нижней части Див

Я пытаюсь есть треугольник/стрелка внизу моего героя, но он не реагирует и не't работа на мобильных очень хорошо, так как треугольник плывет прочь к Право, и абсолютно не больше по центру.

Как я могу оставить треугольник, расположенный в абсолютном центре в нижней части div на все времена?

Пример кода:

http://jsfiddle.net/SxKr5/1/

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;
}
web-tiki
Редактировал вопрос 20-го декабря 2014 в 5:59
Программирование
html5 css3 css css-shapes
1-го ноября 2013 в 12:39
36 просмотров
Комментарии к вопросу (3)
Решение

Может'т вы просто установите слева до 50%, а потом левое поле Значение -25 пикселей, чтобы учесть это's; ширина: http://jsfiddle.net/9AbYc/

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

или если вам нужна ширина переменной, вы могли бы использовать: http://jsfiddle.net/9AbYc/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;
}
Ben Jackson
Редактировал ответ 21-го июня 2014 в 9:49
Комментарии (0)

Вы можете использовать следующие 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>

в

Комментарии (2)

Проверить это:

http://jsfiddle.net/SxKr5/3/

.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')
}
Комментарии (0)

Вы также можете использовать УСБ на "калькулятор", чтобы получить тот же эффект вместо использования отрицательной маржи или свойства преобразования (в случае, если вы хотите использовать эти свойства для всего остального).

.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;
}
Комментарии (0)

Я знаю, что это'т прямого ответа на ваш вопрос, но вы могли бы также рассмотреть возможность использования клип-путь, как в этот вопрос: https://stackoverflow.com/a/18208889/23341.

Комментарии (0)