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

Question

我已经检查了关于论证的所有其他问题，我尝试了各种解决方案，但如果我应用它们，它们就不起作用，偏斜没有发生。这是一个菜单，我在链接上应用了 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

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

Answer 1

您在 a 上应用 padding 和颜色，它占据了所有 .menu-item space 甚至更多，因为它溢出了。

在检查器中，select 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
  }

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

Skewing menu item with css, unskewing the text it's not working

html

css

layout

sass