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

Signaler
Messages postés
37
Date d'inscription
lundi 7 septembre 2015
Statut
Membre
Dernière intervention
17 septembre 2017
 -
Messages postés
37
Date d'inscription
lundi 7 septembre 2015
Statut
Membre
Dernière intervention
17 septembre 2017
 -
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.

1 réponse

Réponse 1 / 1
Messages postés
2371
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
13 janvier 2021
 445
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,
1
Merci
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Signaler
Messages postés
37
Date d'inscription
lundi 7 septembre 2015
Statut
Membre
Dernière intervention
17 septembre 2017
Très bonne idée !!! Merci !
Posez votre question