sKew Ausgabe: Wie man mit sKew

Question

ich bin neu in css sKew, ich machte meine <li>ALL</li> umwandeln zu -45deg, wenn ich das tat mein Text ist zu gedreht, aber ich möchte meinen Text als gerade halten, aber es auch gedreht. Bildschirmfoto.

PSD

My Design

Wie kann ich dieses Problem beheben?

Answer 1

Wenn Sie verwenden möchten skew() Sie Ihren Text in einem div setzen und verwenden diese 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>

Auch dies mit einem <li> funktionieren sollte.

Wenn Sie den Text im Inneren behalten, müssen Sie die Transformation "rückgängig machen", wie oben gezeigt.

Sonst könnten Sie den Text außerhalb der <li> setzen und dies wird nicht von der transform:skew() beeinflusst werden.

(Ähnliche Fragen here)