title: How can I get my text inside of my CSS shape?
body: <p>I am trying to learn how to use the <code>:before</code> to put text into my shape, however I am stuck and not sure how it actually works.</p>
  
  <p>Here is the basic setup:</p>
  
  <pre><code>&lt;div class="trapezoid"&gt; Hello &lt;/div&gt;
  </code></pre>
  
  <p>with</p>
  
  <pre><code>div {
      border-top: 100px solid blue;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      height: 0;
      width: 100px;
    position: relative;
  }
  
  div:before {
    position: absolute;
    top:0;
    height:0;
    width: 100%;
  }
  </code></pre>
  
  <p>However, the text appears below the shape.  Here is my fiddle: <a href="http://jsfiddle.net/om2wf48t/" rel="nofollow">http://jsfiddle.net/om2wf48t/</a></p>