Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Center Triangle at Bottom of Div

I am trying to have a triangle/arrow at the bottom of my hero but it is not responsive and doesn't work on mobile very well as the triangle floats off to the right and is not absolutely centered anymore.

How could I keep the triangle positioned in the absolute center at the bottom of the div at all times?

Example code here:

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; } 
like image 536
Miura-shi Avatar asked Nov 01 '13 00:11

Miura-shi


People also ask

How do I add a triangle to a div in CSS?

Add a triangle to end of div You can use :after selector to add a style to the end of a div. When adding an arrow to bottom we need to keep the top border and make other borders transparent. In this div, the width has been set as 100px. Then the left and the right border have to be half of size of the div.

How do you center the bottom in CSS?

The CSS @bottom-center at-rule is used to style the bottom-center page-margin box in paged media. The bottom-center page-margin box is a variable-width box centered horizontally between the page's left and right border edges and filling the bottom page margin between the bottom-left and bottom-right page-margin boxes.

How do you put a div at the bottom of a body?

Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container.


2 Answers

Can't you just set left to 50% and then have margin-left set to -25px to account for it's width: 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; } 

or if you needed a variable width you could use: 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; } 
like image 170
Ben Jackson Avatar answered Sep 28 '22 21:09

Ben Jackson


You can use following css to make an element middle aligned styled with position: absolute:

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

With CSS having only left: 50% we will have following effect:

Image with left: 50% property only

While combining left: 50% with transform: translate(-50%) we will have following:

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>
like image 33
Mohammad Usman Avatar answered Sep 28 '22 21:09

Mohammad Usman