title: Displaying text at 45 degress in all browsers
body: <p>I've got a peculiar problem related to a requirement to display a piece of text at 45 degree angle.  The requirement is to support "all browsers", however I managed to eliminate IE6 (thank-you-very-much) and older versions of Mozilla/Opera. The requirement is for this display is like this:</p>
  
  <p><img src="https://i.stack.imgur.com/wAkEq.png" alt="enter image description here"></p>
  
  <p>I can get this sorted in CSS3 compliant browsers (latest versions of pretty much everything) using this CSS/HTML:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .homepage-top .red-corner {
      position: absolute;
      right: 0px;
      top: 300px;
      width: 0px;
      height: 0px;
      border-top: 55px solid #e11e2d;
      border-left: 55px solid transparent;
      z-index: 9;
  }
  
  .homepage-top .free {
      position: absolute;
      right: 3px;
      top: 310px;
      text-transform: uppercase;
      color: white;
      font-size: 10pt;
      font-weight: bold;
      z-index: 10;
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg); 
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      -sand-transform: rotate(45deg);
      transform: rotate(45deg);
  }
  &lt;/style&gt;
  
  &lt;div class="red-corner"&gt;&lt;!-- --&gt;&lt;/div&gt;
  &lt;div class="free"&gt;free&lt;/div&gt;
  </code></pre>
  
  <p>It works well with IE9 and newer Firefox, Safari and Opera.  Then I need to get IE7 and IE8 working - and this is where it becomes interesting.  I can use <code>filter</code> on IE7 and <code>-ms-filter</code> on IE8 - and I get very interesting results indeed.</p>
  
  <p>The filter/-ms-filter look like this:</p>
  
  <pre><code>filter: progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
  </code></pre>
  
  <p>Adding this to the <code>.homepage-top .free</code> selector causes IE7 to display the rotated text correctly (although with some black tint to white letters, but I can live with that) - but it ignores absolutely EVERYTHING in the css file following that line.  Removing the <code>filter</code> line restores the rest of the CSS, but, naturally, does not rotate the text.</p>
  
  <p>In IE8 everything works correctly, however adding this to the selector causes IE9 to malfunction.  It seems that IE9 is trying to use both <code>-ms-filter</code> and <code>-ms-transform</code> properties - and this causes some internal confusion.  As a result, IE9 display looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/CoZHD.png" alt="enter image description here"></p>
  
  <p>Clearly, something is wrong here - but how do I go about fixing this so that it works in IE7, 8 and 9?</p>
  
  <p>Many thanks in advance.</p>