Déformation de la hauteur

Bonjour,

après recherche infructueuse je viens zavou pour savoir si déjà ce que je souhaite faire est possible et sinon avec quelle propriété css l'obtenir.

La chose est simple, un div qui a une hauteur différente de chaque côté.
ex: côté droit 100px et côté gauche 200px
ce qui donne un effet un peu bancal.

D'ailleurs je souhaite y intégrer dynamiquement des images, il faudra sans doute que j'utilise un masque à moins que le masque ne se créé directement via la propriété css.

Merci pour les zinfos

Je ne suis pas sûr de comprendre, tu veux un bord qui soit en biais ?

Après 10 secondes de recherche et un clic sur le premier lien :

<div style="border-top:solid 0px ; border-left:solid 50x white;border-right:solid 50px white;border-bottom:solid 200px lightblue;height:200px;">&nbsp;</div>

Modifié par Naemesis (10 May 2012 - 10:40)

Oui, quelque chose comme ça!

Non Naemesis, ce genre de codage ne fonctionnera pas dans ce cas-là.

Effectivement, j'avais pas compris la chose comme ça.

Quoique si en fait, ca peut marcher :
- bordures transparentes;
- image de fond;
- rotation de l'image ou du div d'un certain angle;

Je dis pas que c'est évident, mais ça doit être dans tes cordes si tu as déjà eu l'idée de le faire.

J'ai peur que ce soit un peu trop du "bidouillage" et que côté norme W3C ça passe moyen mais on peut tester

Jpense que niveau "bidouillage" on arrive a faire bien pire sans vraiment s'en rendre compte.

Et niveau W3C jpense pas qu'il y ait de réel problème.

Tiens-nous au courant.

En CSS3 tu pourrais atteindre une partie de ton objectif, sachant que cela ne sera supporté que sur des navigateurs récents.

.transform{
        -moz-transform: perspective(800) rotateY(30deg);
	-webkit-transform: perspective(800) rotateY(30deg);
	border-radius: 10px;
}

<img src="mon-image.jpg" class="transform" />

Fonctionne sur Firefox, Chrome et Safari

Ca fait quoi exactement le perspective(800) ?

a écrit :
The distance from the user to the z=0 plane. It used to apply a perspective transform to the element and its content. If it 0 or a negative value, no perspective transform is applied.

Il semblerait qu'il faille mettre l'unité derrière car ça ne semble pas fonctionner sans (pas d'où je suis en tout cas...)

Exact, il faut écrire

.transform{
        -moz-transform: perspective(800px) rotateY(30deg);
	-webkit-transform: perspective(800px) rotateY(30deg);
	border-radius: 10px;
}

Modifié par Naemesis (10 May 2012 - 15:21)

Bizarre moi ça ne pose aucun problème sans spécifier d'unité....

.transform {
    -moz-transform: perspective(1400px) rotateY(30deg) rotateZ(-2deg);
    border: 1px solid black;
    border-radius: 10px 10px 10px 10px;
    height: 200px;
    width: 500px;
}

Avec ça j'obtiens sensiblement le même positionnement que l'image d'exemple.

Ça devient de la haute couture, je sens que je n'ai pas fini de me torturer l'esprit pour obtenir exactement la forme que je souhaite. Il faudrait spécifier aux programmeurs css de penser à instaurer un :
height-right, height-left, width-top, width-bottom Ça serait nettement plus simple!!

Sinon ça se fait aussi avec des images =°

Ouep, utilisant SPIP je crois que je vais m'orienter vers l'utilisation des masques En plus cela pourra permettre aux utilisateurs de vieux navigateurs de profiter de l'effet décalé des blocs. Mais ça mérite toujours réflexion d'un point de vue css, pour la culture

J'ai continué a tester en modifiant un peu le code, et mon problème c'est que les coté latéraux ne forment jamais d'angle droit avec le coté supérieur.

Autrement, ça mérite effectivement d'être approfondi