父元素倾斜，子元素消除影响

Posted 2021-01-16 zgdawdl

父元素倾斜后，子元素需要是块级元素/行内块元素才能 抵消影响

<nav class="navList">
            <a href="#">首页</a>
            <a href="#">关于我们</a>
            <a href="#">品牌产品</a>
            <a href="#">小捣蛋社区</a>
            <a href="#">加入我们</a>
</nav>

  .navList{
    width: 689px;
    height: 41px;
    margin: 0 auto;
    padding: 14px 53px 12px 55px;
    background-color: rgb(240, 252, 255);
    transform: skew(-30deg);
    >a{
      display: inline-block;
      transform: skew(30deg);
      color: rgb(0, 97, 164);
      font-size: 14px;
    }
  }