CSS Transformer carré en diluant losange

Comment créer un losange:CSS Transformer carré en diluant losange (comme indiqué en rouge) par la transformation d'un carré à l'aide de css? Seuls les points B et C doivent se déplacer. Original taille des carrés est 25px par 25px.

Je suis en train de parvenir à ce résultat, et plus tard, de le faire pivoter de 45 degrés, de sorte qu'il ressemble à un diamant. Je pense que cela peut être fait à l'aide de la transformation:matrix();

P. S. je veux essayer autant que possible de ne pas utiliser explorercanvas de façon, depuis que je suis en train de minimiser les balises script dans le code html.

OriginalL'auteur UrBestFriend | 2011-04-06