sKew 문제 : sKew로 변형하는 방법

Question

나는 CSS sKew에서 새롭다. 내 텍스트가 너무 회전되어 있는데 <li>ALL</li>을 -45deg로 변형했다.하지만 텍스트를 직선으로 유지하고 싶다. 회전. ScreenShot.

PSD

내 디자인

나는이 문제를 해결하려면 어떻게 할 수 있습니까?

Answer 1

당신은 당신이 너무 <li>와 함께 작동해야이 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>

을

div 내부에 텍스트를 넣어 사용할 수 있습니다 skew() 사용합니다.

텍스트를 계속 유지하는 경우 위와 같이 텍스트 정보를 "실행 취소"해야합니다.

그렇지 않으면 <li> 외부로 텍스트를 넣을 수 있으며 transform:skew()의 영향을받지 않습니다.

(비슷한 질문 here)