it-swarm.com.ru

Центральный треугольник в нижней части Div

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

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

Пример кода здесь:

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

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;
}
46
Miura-shi

Разве вы не можете просто установить left в 50%, а затем установить margin-left в -25px для учета его ширины: 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;
}
102
Ben Jackson

Вы можете использовать следующую css для выравнивания элемента по центру в стиле position: absolute:

.element {
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
}

С CSS, имеющим только left: 50%, мы получим следующий эффект:

 Image with left: 50% property only

При объединении left: 50% с transform: translate(-50%) у нас будет следующее:

 Image with transform: translate(-50%) as well

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

14
Mohammad Usman

Проверь это:

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')
}
6
Hasan Alaca

Вы также можете использовать CSS «calc» для получения того же эффекта вместо использования отрицательного поля или свойств преобразования (в случае, если вы хотите использовать эти свойства для чего-либо еще).

.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
Josh Jennings