sKew問題：sKewで変換する方法

Question

私はCSSを使用していないので、テキストを回転させたときに<li>ALL</li>を-45degに変換しましたが、テキストをストレートにしたい回転した。 ScreenShot。

PSD

マイデザイン

どのように私はこれを修正することはできますか？

Answer 1

あなたはdiv内のテキストを入れて、これはあまりにも<li>で動作するはず

.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>

このCSSを使用することができますskew()使用したい場合。

テキストを内部に保持する場合は、上記のように、変換を元に戻す必要があります。

そうでなければ、<li>の外側にテキストを置くことができ、これはtransform:skew()の影響を受けません。

（類似の質問here）