CSS Transformer carré en losange plus fin

Question

Comment créer un losange: (comme indiqué en rouge) en transformant un carré en utilisant css? Seuls les points B et C doivent bouger. La taille originale du carré est 25px par 25px. J'essaie d'obtenir ce résultat et je le ferais ensuite pivoter de 45 degrés pour qu'il ressemble à un diamant. Je pense que cela peut être fait en utilisant la transformation: matrix();

P.S. Je veux essayer autant que possible de ne pas utiliser explorercanvas, puisque j'essaye de minimiser les balises de script dans le HTML.

Answer 1

-webkit-transform: rotate(45deg) skew(20deg, 20deg) 

Modifiez les valeurs d'inclinaison pour affecter la maigreur de votre diamant. Cela va pousser les autres coins et vous aurez besoin de mettre à l'échelle l'ensemble de l'objet si le maintien des dimensions spécifiques est une exigence.

Voici une jsfiddle avec la transformation que vous avez décrite.
Et certains further reading sur les transformations CSS.

Answer 2

Je sais que vous avez déjà accepté une réponse, mais vous pouvez le faire sans utiliser transform, ce qui est souvent bizarre pour implémenter cross-browser (en particulier dans IE). L'inconvénient de ma technique est qu'il y a encore quelques éléments en jeu.

Sur la base de ceci: http://www.howtocreate.co.uk/tutorials/css/slopes

Voir: http://jsfiddle.net/rQCQ5/

Answer 3

à l'aide scaleX ou scaleY peut être un peu plus simple:

transform: scaleX(.5) rotate(45deg); 

http://jsfiddle.net/greypants/t5Dt8/

Suffit de se rappeler que les questions d'ordre et c'est le contraire de ce que vous pensez que ce serait.

Answer 4

C'est aussi ma façon de le faire, mais encore une fois, je ne pense pas qu'il soit possible d'obtenir des ombres correctement.

.rhombus{ 
width: 0; 
height: 0; 
position: relative; 
margin: -60px 0 0 60px; 
border-bottom: solid 360px #000 ; 
border-left: solid 240px transparent; 
border-right: solid 240px transparent; 
z-index:2; 
} 

http://jsfiddle.net/vCQ3c/

Answer 5

Ana Tudor suggests à utiliser skewX et scaleY pour compenser pour maintenir les dimensions même. Pour mieux comprendre comment fonctionne skew, vérifiez la vidéo liée

.rhombus { 
    transform: skewX(30deg) scaleY(.86); /* .86 = cos(30deg) */ 
}