用css倾斜菜单项，取消倾斜它不起作用的文本答案

【问题标题】：Skewing menu item with css, unskewing the text it's not working用css倾斜菜单项，取消倾斜它不起作用的文本
【发布时间】：2021-04-06 07:14:23
【问题描述】：

我已经检查了有关该论点的所有其他问题，我尝试了各种解决方案，但如果我应用它们它们不起作用，那么偏差就不会发生。这是一个菜单，我在链接上应用了display: block，如果我取消倾斜它就不会保持倾斜。

结构：

     <div class="container">
        <ul class="menu">
          <li class="menu-item active">
            <a href="#">Home</a>
          </li>
          <li class="menu-item">
            <a href="#">Link Us</a>
          </li>
          <li class="menu-item">
            <a href="#">Link</a>
          </li>
          <li class="menu-item">
            <a href="#">Link</a>
          </li>
          <li class="menu-item">
            <a href="#">Link</a>
          </li>
        </ul>
      </div>

CSS (SCSS)

 ul.menu {
  display: flex;
  justify-content: center;
  flex-direction: row;
  list-style: none;

  li.menu-item {
    margin-right: 4px;
    position: relative;
    transform: skewX(-15deg);

    a {
      display: block;
      font-size: 15px;
      color: $white;
      text-transform: uppercase;
      padding: 17px 15px 13px 30px;
      transform: skewX(15deg);
    } // a
  } //.menu-item

根据其他答案中的其他 sn-ps，我知道它应该可以工作，但是出了点问题，我不太明白为什么。有什么想法吗？

【问题讨论】：

似乎按预期工作here。
它似乎工作正常（即背景菜单项蓝色是倾斜的，文本是直立的）。也许您可以提出一个显示问题的 sn-p，因为您发布的内容似乎没有给 @LouysPatriceBessette 有用的笔。
@AHaworth codepen.io/K3nzie/pen/XWjVwbM 我可能真的很密集，但它不起作用..这是我的代码。

标签： html css layout sass

【解决方案1】：

您将padding 和颜色应用到a 上，这会占用所有.menu-item 空间，甚至更多，因为它会溢出。

在检查器中，选择menu-item... 你应该注意到它是倾斜的：

这是CodePen 的相关部分，我在其中修复了这个问题：

li.menu-item {
  margin-right: 4px;
  position: relative;
  transform: skewX(-15deg);
  
  /* Put that here! */ 
  padding: 17px 15px 13px 30px;
  background: $lightRed;
  &:hover {
    background: $redActive;
  } // &:hover
  
  a {
    display: block;
    font-size: 15px;
    color: $white;
    font-family: "Cinzel", serif;
    text-transform: uppercase;
    // padding: 17px 15px 13px 30px;
    // background: $lightRed;
    transform: skewX(15deg);
    transition: all 0.3s;
    text-decoration: none;
    // &:hover {
    //   background: $redActive;
    // } // &:hover
  }

【讨论】：

谢谢，我在检查器中没有注意到。