Display text at 45 degress in all browsers

Question

I have a peculiar problem related to the requirement to display a fragment of text at an angle of 45 degrees. The requirement is to support “all browsers,” however I managed to eliminate IE6 (thanks-very-very) and older versions of Mozilla / Opera. The requirement for this display is as follows:

I can get this list in CSS3-compatible browsers (latest versions of almost everything) using this CSS / HTML:

<style type="text/css">
.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);
}
</style>

<div class="red-corner"><!-- --></div>
<div class="free">free</div>

It works well with IE9 and newer Firefox, Safari and Opera. Then I need to get IE7 and IE8 to work - and that gets interesting. I can use filteron IE7 and -ms-filterIE8 - and really get very interesting results.

The filter / -ms filter is as follows:

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 */

.homepage-top .free IE7 ( , ), css . filter CSS, , , .

IE8 , IE9. , IE9 -ms-filter, -ms-transform, . IE9 :

, - , , IE7, 8 9?

.

Answer 1

, MSIE. http://de.wikipedia.org/wiki/Conditional_Comments

<!--[if lte IE 8]> <style>...</style> <![endif]-->

<!--[if IE 9]> <style>...</style> <![endif]-->

Answer 2

? CSS , , .