Affichage du texte à 45 degrés dans tous les navigateurs

Question

J'ai un problème particulier lié à l'obligation d'afficher un morceau de texte à un angle de 45 degrés. L'exigence est de supporter "tous les navigateurs", mais j'ai réussi à éliminer IE6 (merci beaucoup) et les anciennes versions de Mozilla/Opera. L'exigence pour cet affichage est la suivante :

Je peux obtenir ce résultat dans les navigateurs compatibles avec CSS3 (les dernières versions de presque tout) en utilisant ce 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>

Il fonctionne bien avec IE9 et les versions plus récentes de Firefox, Safari et Opera. Ensuite, je dois faire fonctionner IE7 et IE8 - et c'est là que ça devient intéressant. Je peux utiliser filter sur IE7 et -ms-filter sur IE8 - et j'obtiens des résultats très intéressants.

Le filtre/-ms-filtre ressemble à ceci :

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

En ajoutant ceci à la .homepage-top .free permet à IE7 d'afficher correctement le texte pivoté (bien qu'il y ait une teinte noire sur les lettres blanches, mais je peux m'en accommoder), mais il ignore absolument TOUT ce qui se trouve dans le fichier css qui suit cette ligne. En supprimant le filter rétablit le reste du CSS, mais, naturellement, ne fait pas pivoter le texte.

Dans IE8, tout fonctionne correctement, mais l'ajout de cet élément au sélecteur entraîne un dysfonctionnement dans IE9. Il semble qu'IE9 essaie d'utiliser les deux éléments suivants -ms-filter y -ms-transform et cela entraîne une certaine confusion interne. En conséquence, l'affichage d'IE9 ressemble à ceci :

Il est clair que quelque chose ne va pas ici - mais comment faire pour corriger cela afin que cela fonctionne dans IE7, 8 et 9 ?

Merci d'avance.