sKew Issue: How to transform with sKew

0
votes

I'm new in css sKew, I made my <li>ALL</li> transform to -45deg when I did this my Text is too rotated, But I want to keep my text as Straight, but it also rotated. ScreenShot.

PSD
PSD image:

My Design
My Design:

How Can I will fix this?

1
transformskew

1 Answers

1
votes

If you want to use skew() you can put your text inside a div and use this 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>

This should work with a <li> too.

If you keep the text inside you need to "undo" the tranformation, as showed above.

Otherwise you could put the text outside the <li> and this will be not affected by the transform:skew().

(Similar question here)