title: Positioning Text Inside a Triangle CSS
body: <p>So assuming I have the below triangle. Without adding any html or tags how could I go about positioning the text into the center of the triangle?</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/3LXaD/" rel="nofollow">http://jsfiddle.net/3LXaD/</a></p>
  
  <p>You will notice the white text in the top right corner of the triangle. I understand a triangle is a large border around the shape. Is this even possible?</p>
  
  <p>CSS</p>
  
  <pre><code>div:nth-of-type(1) {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 150px 130px 150px;
      border-color: transparent transparent #d30000 transparent;
      line-height: 0px;
      _border-color: #000000 #000000 #d30000 #000000;
      _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
  }
  
  div {
      font-size: 16px;
      color: #FFFFFF; 
      text-align: center;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt;This is a triangle&lt;/div&gt;
  </code></pre>