Propriété CSS skewX()

Résolu/Fermé

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

A voir également:

Propriété CSS skewX()
Enlever couleur lien css ✓ - Forum CSS
Css exposant ✓ - Forum CSS
Css download - Télécharger - HTML
Css retour à la ligne ✓ - Forum Webmastering
[Html/css]retour à la ligne dans un div ✓ - Forum CSS

1 réponse

Réponse 1 / 1

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
7 sept. 2017 à 10:11

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

Très bonne idée !!! Merci !

Discussions similaires

trait horizontal avec du css

Enlever le soulignement sous les liens en HTML/CSS

HTML - définir taille bouton

[CSS] Forcé retour à la ligne

[CSS] Mettre un objet au premier plan