CSS无法解歪文本问题

Question

我正在尝试使用拉直的文本创建歪斜的链接。尽管做了大量的修补，我仍然无法扭曲文本。下面是我使用的HTML代码：

<div class="menu"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <h1>Photography</h1> 
     </div> 
     <div class="col-md-6"> 
      <ul> 
       <li class="skew"><a class="skew-fix">Work</a></li> 
       <li class="skew"><a class="skew-fix">Shop</a></li> 
       <li class="skew"><a class="skew-fix">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

这里是CSS：

.menu { 
    height: 90px; 
    border-bottom: 1px solid black; 
    padding: 0 50px; 
} 
.menu h1 { 
    line-height: 90px; 
    margin: 0; 
} 
.skew { 
    margin: 5px 0; 
    display: inline-block; 
    font-size: 25px; 
    padding: 0 18px; 
    float: right; 
    line-height: 80px; 
    transform: skewX(-20deg); 
} 
.skew-fix { 
    transform: skewX(20deg); 
} 

任何人都可以找出什么，我做错了什么？

Answer 1

transform不适用于链接等内联元素。

让他们inline-block或block

.menu { 
 
    height: 90px; 
 
    border-bottom: 1px solid black; 
 
    padding: 0 50px; 
 
} 
 
.menu h1 { 
 
    line-height: 90px; 
 
    margin: 0; 
 
} 
 
.skew { 
 
    margin: 5px 0; 
 
    display: inline-block; 
 
    font-size: 25px; 
 
    padding: 0 18px; 
 
    float: right; 
 
    line-height: 80px; 
 
    transform: skewX(-20deg); 
 
    background: pink; 
 
} 
 
.skew-fix { 
 
    transform: skewX(20deg); 
 
    display: block; 
 
}

<div class="menu"> 
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     <h1>Photography</h1> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <ul> 
 
     <li class="skew"><a class="skew-fix">Work</a> 
 
     </li> 
 
     <li class="skew"><a class="skew-fix">Shop</a> 
 
     </li> 
 
     <li class="skew"><a class="skew-fix">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>