如何倾斜 ul li 而不是 ul li a 中的 <a>？

Question

我有一个 ul li a 菜单，想要倾斜 ul li 而不是 a。 ul li 倾斜，但 a 不会倾斜到正常位置。

header ul li {
    display: inline-block;
    background: #f5c207;
    padding: 10px 20px;
    margin-left: 10px;
    transform: skew(-20deg);
}
header ul li a {
    transform: skew(20deg);
}

<div id="top" class="container">
    <ul>
        <li><a href="">About us</a></li>
        <li><a href="">Other</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</div>

Answer 1

你不能倾斜内联元素，试试这个：

header ul li {
    display: inline-block;
    background: #f5c207;
    padding: 10px 20px;
    margin-left: 10px;
    transform: skew(-20deg);
}
header ul li a {
    display:inline-block;
    transform: skew(20deg);
}

<header id="top" class="container">
    <ul>
        <li><a href="">About us</a></li>
        <li><a href="">Other</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</header>

Answer 2

您需要将 display: block（或 inline-block）添加到列表项中的 a。

header ul li {
  display: inline-block;
  background: #f5c207;
  padding: 10px 20px;
  margin-left: 10px;
  transform: skew(-20deg);
}

header ul li a {
  display: block;
  transform: skew(20deg);
}

<header id="top" class="container">
  <ul>
    <li><a href="">About us</a></li>
    <li><a href="">Other</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</header>

Answer 3

您正试图扭曲内联元素。变换只能应用于可变换元素，最常见的是块级元素。来自 spec:

A transformable element is an element in one of these categories: an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform.

要将此集 a 固定为 display: inline-block; 或简单地 display: block;

如何倾斜 ul li 而不是 ul li a 中的 <a>？

How to skew a ul li but not the <a> in ul li a?

css

css-transforms

skew