CSS Transformer carré en diluant losange
Comment créer un 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
Vous devez vous connecter pour publier un commentaire.
Modifier les valeurs d'inclinaison à influer sur le mode de maigre de votre diamant est. Cela va pousser les autres coins et vous aurez besoin à l'échelle de l'ensemble de l'objet si le maintien des dimensions est une exigence.
Voici un jsfiddle avec la transformation que vous avez décrit.
Et certains lectures complémentaires sur les transformations CSS.
OriginalL'auteur RSG
Je sais que vous avez déjà accepté une réponse, mais vous pouvez le faire sans l'aide de
transform
, qui est souvent décalé pour mettre en œuvre la croix-navigateur (en particulier dans IE). L'inconvénient de ma technique c'est qu'il y a deux éléments dans le jeu.Basé sur ceci: http://www.howtocreate.co.uk/tutorials/css/slopes
Voir: http://jsfiddle.net/rQCQ5/
Je suis d'accord. Je voudrais vous donner un +1 pour votre réponse valide, mais je n'ai malheureusement manqué de voix!
Merci pour cela, mais ne peut malheureusement pas utiliser ce que j'ai à ajouter une liste déroulante d'ombre.
Dans ce cas, vous avez raison, vous ne pouvez pas utiliser cette.
OriginalL'auteur thirtydot
D'utiliser les propriétés scaleX ou scaleY peut-être un peu plus simple:
http://jsfiddle.net/greypants/t5Dt8/
Suffit de se rappeler que l'ordre des questions, et il est à l'opposé de ce que vous pensez que ce serait.
OriginalL'auteur Dan Tello
Ana Tudor suggère à utiliser
skewX
etscaleY
pour compenser pour garder les dimensions de la même. Pour plus de compréhension sur la façon dontskew
fonctionne, vérifiez la vidéo liéeOriginalL'auteur Zach Saucier
C'est aussi ma façon de faire, mais encore une fois je ne pense pas qu'il soit possible d'obtenir des ombres sur le correctement.
http://jsfiddle.net/vCQ3c/
OriginalL'auteur Blckpstv