web-dev-qa-db-fra.com

Triangle central au bas de la div

J'essaie d'avoir un triangle/une flèche au bas de mon héros, mais il n'est pas réactif et ne fonctionne pas très bien sur mobile, car le triangle flotte à droite et n'est plus absolument centré.

Comment pourrais-je garder le triangle positionné dans le centre absolu au bas de la div à tout moment?

Exemple de code ici:

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

Ne pouvez-vous pas simplement définir left sur 50% et ensuite avoir margin-left défini sur -25px pour prendre en compte sa largeur: 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;
}

ou si vous avez besoin d’une largeur variable, vous pouvez utiliser: 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

Vous pouvez utiliser les CSS suivants pour créer un élément aligné au milieu avec position: absolute:

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

Avec CSS n'ayant que left: 50%, nous aurons l'effet suivant:

 Image with left: 50% property only

En combinant left: 50% avec transform: translate(-50%) nous aurons:

 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

Vérifie ça:

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

Vous pouvez également utiliser un CSS "calc" pour obtenir le même effet au lieu d'utiliser la marge négative ou les propriétés de transformation (si vous souhaitez utiliser ces propriétés pour autre chose).

.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