Menu

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 

Votre réponse

2 réponses

Meilleure réponse
Pitet 2378 Messages postés lundi 11 février 2013Date d'inscription 2 février 2018 Dernière intervention - 7 sept. 2017 à 10:11
1
Merci
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,

Merci Pitet 1

Avec quelques mots c'est encore mieux Ajouter un commentaire

CCM a aidé 22530 internautes ce mois-ci

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