sKew Problème: Comment transformer avec sKew

Question

Je suis nouveau dans css sKew, j'ai fait mon <li>ALL</li> transformer à -45deg quand je l'ai fait mon texte est trop tourné, mais je veux garder mon texte en tant que droit, mais aussi tourné. Capture d'écran.

PSD

My Design

Comment puis-je résoudre ce problème?

Answer 1

Si vous souhaitez utiliser skew() vous pouvez mettre votre texte à l'intérieur d'un div et utiliser CSS

.container { 
 
    transform: skewX(-30deg); 
 
    padding: 20px; 
 
    width: 100px; 
 
    background-color: black; 
 
} 
 

 
.content { 
 
    width: 100px; 
 
    color: white; 
 
    transform: skewX(30deg); 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
}

<div class="container"> 
 
    <div class="content">All</div> 
 
</div>

Cela devrait fonctionner avec un <li> aussi.

Si vous gardez le texte à l'intérieur, vous devez "défaire" la transformation, comme indiqué ci-dessus.

Sinon, vous pouvez mettre le texte en dehors du <li> et cela ne sera pas affecté par le transform:skew().

(similaire question here)