title: Horizontally center small triangle at bottom of div and resize responsively and proportionately
body: <p>With CSS I am trying to accomplish the following effect that responds to screen resizing (for responsive design). Specifically I want the triangle to get proportionately smaller as the browser window gets smaller. I have mocked this up as a PNG (It's not HTML/CSS):</p>
  
  <p><img src="https://i.stack.imgur.com/EHcAE.png" alt="enter image description here"></p>
  
  <p>So far I am using this code as a base, with 2 divs stack on top of one another:</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.pinkbox {
      background-color: #FF8290;
      width: 100%;
      height: 100px;
  }
  
  .greenbox {
      background-color: #85D782;
      width: 100%;
      height: 100px;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="pinkbox"&gt;&lt;/div&gt;
  &lt;div class="greenbox"&gt;&lt;/div&gt;
  </code></pre>