变换 - 仅倾斜锚标记背景 [重复]答案

【问题标题】：Transform - Skew anchor tag background only [duplicate]变换 - 仅倾斜锚标记背景 [重复]
【发布时间】：2021-01-23 12:41:27
【问题描述】：

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

https://jsfiddle.net/z4ms6k07/1/

.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>

【问题讨论】：

标签： css transform css-transforms skew

【解决方案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>

【讨论】：

我几乎可以发誓我试过了：/非常感谢！
不客气。你确实做了，但只是-9px，而且你没有改变显示。

【解决方案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>

【讨论】：