Créer une enveloppe postale en CSS3

Aller, j'ai pas l'habitude de poster mes petits testes en développement web mais aujourd'hui je vais expliquer la façon de procéder pour créer une enveloppe en CSS3.

Si vous avez aucune notion de CSS3 et HTML alors je pense que cet article va vite vous gonfler ..

Pour commencer on va créer deux div en HTML, un avec une class "box" et l'autre avec une class "tri".

<div class="box">
          <div class="tri"></div>
     </div>

La technique que j'utilise est basée sur la propriété transform de CSS3 et plus particulièrement la valeur rotate c'est à dire que je superpose deux boîtes l'une sur l'autre et je tourne celle du milieu à 45 degrés.

La première boîte est un simple rectangle de 215px sur 150px, en "overflow: hidden", c'est important car sinon ça donnera une enveloppe ouverte, la bordure noir de 1px formera le cadre de l'enveloppe.

J'ai rajouté un effet d'ombre mais c'est juste pour le fun.

.box{
    border: 1px solid black;
    width: 215px;
    height: 150px;  
    overflow: hidden;
    box-shadow: 0px 0px 10px #888;
 }

La deuxième est un carré de 150px par 150px, avec un coin arrondi et tourné à -45degrés avec "transform: rotate(-45deg)" ce qui fait qu'une moitiée passe en "hidden" pour former ainsi la fermeture de l'enveloppe.

.tri{  
    width: 150px;
    height: 150px;
    border: 1px solid black;
    
    -webkit-border-radius: 0px 0px 0px 8px;
    border-radius: 0px 0px 0px 8px;
    
   -webkit-transform-origin: 0px 0px;
   -o-transform-origin: 0px 0px;
   -ms-transform-origin: 0px 0px;
   transform-origin: 0px 0px;
   
   -webkit-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }

Ce code marche sur les dernières versions des navigateurs: Opéra, Safari, Chrome, Firefox, et IE 9 car j'ai pas le 10 sous la main, mais il devrait fonctionner aussi.