title: Center Triangle at Bottom of Div
body: <p>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.</p>
  
  <p>How could I keep the triangle positioned in the absolute center at the bottom of the div at all times?</p>
  
  <p>Example code here:</p>
  
  <p><a href="http://jsfiddle.net/SxKr5/1/">http://jsfiddle.net/SxKr5/1/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="hero"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>