title: Placing text on a CSS trapezoid
body: <p>I have inherited a legacy app for a rewrite and have run across a curious problem.  There is tabular data displayed on the page where the title of the table is within a trapezoidal shape that resembles a manila envelope tab.  At the bottom of such tables, there is usually a button row that is the same shape as the table title but rotated 180&deg;.  Currently, this effect is being pulled off by using a square image with a white triangle in one half on a transparent background as a background image in the corner of a rectangular block to achieve the look of a trapezoid.  However, this technique is prone to flickering when the page is refreshed.</p>
  
  <p>As an exercise, I have tried to see if I can replace this with a pure CSS technique.  I found this <a href="http://css-tricks.com/examples/ShapesOfCSS/" rel="nofollow">link</a> to different shapes in CSS and have emulated the trapezoid to look as I need.  I am able to place the table title text within a trapezoid correctly.  However, when I need the look of the 180&deg; rotated trapezoid, I am unable to get the text to place within the shape.  My code is included below and here is a <a href="http://jsfiddle.net/HJPfG/" rel="nofollow">jsFiddle</a> showing what I have accomplished so far.  I understand that the text shows below the rotated trapezoid because the height is set to 0 and I'm using border-top to build the shape.  Is there anything I can do to get this to work correctly?</p>
  
  <p>Please keep in mind that I need this to display in IE8 (and possibly also IE8 in compatibility mode -- IE7).  Also, I'd like to keep additional HTML elements to a minimum because I want to keep this as semantic as possible.  I know I can place a span inside the div and absolutely position that span so that it displays the text within the shape, but when I do that I have to manually set a width on the trapezoid and when the width can vary from button row to button row, I'd rather not go down that path.</p>
  
  <p>Thanks.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="trap"&gt;Title Text&lt;/div&gt;
  &lt;div class="trap180"&gt;Button Row&lt;/div&gt;​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.trap {
      color: black;
      font: normal bold 13px Arial;
      border-bottom: 27px solid #F00;
      border-right: 27px solid transparent;
      height: 0px;
      float: left;
      line-height: 27px;
      padding: 0 4px;
  }
  
  .trap180 {
      clear: both;
      color: black;
      font: normal bold 13px Arial;
      border-top: 27px solid #F00;
      border-left: 27px solid transparent;
      height: 0px;
      float: right;
      margin: 20px 0 0 0;
      line-height: 27px;
      padding: 0px 4px 0;
  }​
  </code></pre>