Center Triangle at Bottom of Div

Question

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    lt div class  hero  gt  lt  div gt    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

User · Accepted Answer

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

User · Answer

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     While combining left  50  with transform  translate -50   we will have following      x000D   x000D   hero     x000D    background-color   e15915  x000D    position  relative  x000D    height  320px  x000D    width  100   x000D    x000D   x000D   x000D   hero after   x000D    border-right  solid 50px transparent  x000D    border-left  solid 50px transparent  x000D    border-top  solid 50px  e15915  x000D    transform  translateX -50    x000D    position  absolute  x000D    z-index  -1  x000D    content      x000D    top  100   x000D    left  50   x000D    height  0  x000D    width  0  x000D    x000D   lt div class  hero  gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I know this isn t a direct answer to your question  but you could also consider using clip-path  as in this question  https   stackoverflow com a 18208889 23341

User · Answer

You could also use a CSS  calc  to get the same effect instead of using the negative margin or transform properties  in case you want to use those properties for anything else     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

User · Answer

Check this   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

[html] Center Triangle at Bottom of Div

Examples related to html

Examples related to css

Examples related to css-shapes