Signaler

Propriété CSS skewX() [Résolu]

Posez votre question Nintendotesteurl 37Messages postés lundi 7 septembre 2015Date d'inscription 17 septembre 2017 Dernière intervention - Dernière réponse le 7 sept. 2017 à 14:21 par Nintendotesteurl
Bonjour,

J'ai utilisé la propriété CSS :
transform: skewX(-45deg);
pour créer un parallélépipède. Problème ce parallélépipède contient du texte et il est donc aussi penché. Autre problème ce parallélépipède est cliquable, donc on peut pas rajouter le texte artificiellement grâce au positions relative/absolute.

Avez-vous une solution ?

Cordialement.
Utile
+1
plus moins
Salut,

Et en appliquant un skewX de 45deg sur le texte pour le remettre droit ?

<a href="#" rel="nofollow noopener noreferrer" target="_blank" class="para">
  <span class="texte">Lorem ipsum dolor sit amet</span>
</a>


.para {
  display: block;
  width: 200px;
  height: 200px;
  border: solid 1px black;
  transform: skewX(-45deg);
}

.para .texte {
  display: inline-block;
  transform: skewX(45deg);
  margin: 80px 40px 0 40px;
  border: solid 1px gray;
}


Bonne journée,
Nintendotesteurl 37Messages postés lundi 7 septembre 2015Date d'inscription 17 septembre 2017 Dernière intervention - 7 sept. 2017 à 14:21
Très bonne idée !!! Merci !
Répondre
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !