CSS Transformer un carré en un losange plus fin

Question

Comment créer un losange : (comme indiqué en rouge) en transformant un carré à l'aide de css ? Seuls les points B et C doivent être déplacés. La taille originale du carré est de 25px par 25px.

J'essaie d'obtenir ce résultat et je voudrais ensuite le faire pivoter de 45 degrés pour qu'il ressemble à un diamant. Je pense que cela peut être fait en utilisant la fonction transform:matrix() ;

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

Answer 1

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

Modifiez les valeurs d'inclinaison afin d'affecter la finesse de votre diamant. Les autres coins seront repoussés et vous devrez mettre à l'échelle l'ensemble de l'objet si vous souhaitez conserver les dimensions spécifiques.

Voici un jsfiddle avec la transformation que vous avez décrite.
Et certains autres lectures 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 qui est souvent difficile à mettre en œuvre dans les différents navigateurs (en particulier dans IE). L'inconvénient de ma technique est qu'il y a quelques éléments supplémentaires en jeu.

Basé sur ça : http://www.howtocreate.co.uk/tutorials/css/slopes

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

Answer 3

L'utilisation de scaleX ou scaleY peut être un peu plus simple :

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

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

Il faut juste se rappeler que l'ordre est important, et que c'est le contraire de ce que vous pensez.

Answer 4

Ana Tudor suggère à utiliser skewX y scaleY pour compenser afin de garder les mêmes dimensions. Pour mieux comprendre comment skew fonctionne, regardez la vidéo en lien

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

Answer 5

C'est aussi ma façon de 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/