title: (Down) Arrow Box with CSS
body: <p>I want to do what <a href="https://stackoverflow.com/questions/16180107/arrow-box-with-css">this arrow box does</a>, but instead of an arrow pointing to the right, I want it to point downward.</p>
  
  <p>I've tried something like this: <a href="http://jsfiddle.net/thematejka/hbzHZ/" rel="nofollow noreferrer">jsfiddle link here</a></p>
  
  <pre><code>#triangle-down {
      width: 0;
      height: 0;
      border-left: 150px solid transparent;
      border-right: 150px solid transparent;
      border-top: 30px solid red;
  }
  #body {
      background-color: red;
      width:300px;
  }
  
  &lt;div id="body"&gt;
       &lt;h2&gt;Title&lt;/h2&gt;
  
      &lt;p&gt;this is text.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="triangle-down"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>It tends to be unreliable in terms of lining up the two divs. I'd like a one div solution.</p>