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

Nintendotesteurl 37 Messages postés lundi 7 septembre 2015Date d'inscription 17 septembre 2017 Dernière intervention - 7 sept. 2017 à 02:58 - Dernière réponse : Nintendotesteurl 37 Messages postés lundi 7 septembre 2015Date d'inscription 17 septembre 2017 Dernière intervention
- 7 sept. 2017 à 14:21
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.
Afficher la suite 

2 réponses

Répondre au sujet
Pitet 2368 Messages postés lundi 11 février 2013Date d'inscription 15 janvier 2018 Dernière intervention - 7 sept. 2017 à 10:11
+1
Utile
1
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,
Cette réponse vous a-t-elle aidé ?  
Nintendotesteurl 37 Messages 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 !
Commenter la réponse de Pitet