Triangle central en bas de la division

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

Comment pourrais-je garder le sortingangle positionné dans le centre absolu au bas du div en tout temps?

Exemple de code ici:

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

HTML:

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

Ne pouvez-vous pas simplement mettre à left à 50% et ensuite définir une margin-left à -25px pour tenir compte de 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; } 

Vous pouvez utiliser le css suivant pour rendre un élément central aligné avec la position: absolute :

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

Avec les CSS ne partant que left: 50% nous aurons l’effet suivant:

Image avec la gauche: propriété de 50% seulement

En combinant à left: 50% à transform: translate(-50%) on aura:

Image avec transformée: traduire (-50%) également

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

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') } 

Vous pouvez également utiliser un CSS “calc” pour obtenir le même effet au lieu d’utiliser les propriétés de marge négative ou 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; }