变换 - 仅倾斜锚标记背景

Question

如何在不更改 HTML 的情况下使文本笔直，同时仅在背景上保持倾斜？

.btn {
  transform: skewX(-59deg);
  background-color: yellow;
}

.btn a {
  transform: skewX(59deg);
}

<div class="wrapper">
  <div class="btn btn-one">
    <a href="#">BTN ONE</a>
  </div>
  <div class="btn btn-two">
    <a href="#">BTN TWO</a>
  </div>
</div>

Answer 1

您可以向后倾斜文本。由于 transform 不适用于非块元素，并且 a 是内联标签，因此您需要将 a 标签 display 更改为 inline-block 或 block :

.btn {
  transform: skewX(-59deg);
  background-color: yellow;
}

.btn a {
  display: inline-block;
  transform: skewX(59deg);
}

<div class="wrapper">
  <div class="btn btn-one">
    <a href="#">BTN ONE</a>
  </div>
  <div class="btn btn-two">
    <a href="#">BTN TWO</a>
  </div>
</div>

Answer 2

如果您将 display: block; 或 display: inline-block; 添加到 a 标签，这将使其与 transform 属性一起使用。因此，为了使用 transform: skew(-59deg)，您必须将 display: block; 或 display: inline-block; 添加到 a 标签

.btn {
    display: inline-block;
    padding: 10px 30px;
    margin: 5px;
    transform: skewX(-59deg);
    background-color: yellow;
}
.btn a {
    transform: skewX(59deg);
    display: inline-block;
}

<div class="wrapper">
  <div class="btn btn-one">
        <a href="#">BTN ONE</a>
  </div>
  <div class="btn btn-two">
        <a href="#">BTN TWO</a>
  </div>
</div>

变换 - 仅倾斜锚标记背景

Transform - Skew anchor tag background only

css

transform

css-transforms

skew