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>