Center Triangle at Bottom of Div

by

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

More Related Contents:

  1. I want to get this CSS shape and have a background puicture inside it
  2. How to make double border on left only with thick outside and thin inside [duplicate]
  3. Element will not stay centered, especially when re-sizing screen
  4. Responsive grid of hexagons
  5. Curve bottom side of the div to the inside with CSS
  6. How to make this arrow in CSS only?
  7. CSS Progress Circle
  8. How to use CSS to surround a number with a circle?
  9. Elongated hexagon shaped button using only one element
  10. html/css hexagon with image inside
  11. Circular percent progress bar
  12. How does this CSS produce a circle?
  13. Easier way to create circle div than using an image?
  14. HTML5 / CSS3 Circle with Partial Border
  15. How to draw a trapezium/trapezoid with css3?
  16. Create a slanted edge to a div [duplicate]
  17. Draw Circle using css alone [duplicate]
  18. Creating a ‘New’ spiky label with 24 or above point burst
  19. Half circle with CSS (border, outline only)
  20. How to add border to a container with transparent gaps in between
  21. How to create a curved speech bubble?
  22. How can I create a wavy shape CSS?
  23. How to Make A Chevron Arrow Using CSS?
  24. Title with bottom border smaller than width
  25. CSS Zigzag Border with a Textured Background
  26. How do I create a teardrop in HTML?
  27. Square DIV where height is equal to viewport
  28. How to create a heart shape using CSS?
  29. Make plus symbol in CSS
  30. Create wavy borders in CSS for top and bottom borders

Leave a Comment