变换-仅倾斜锚点标签背景

问题描述

在不更改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>

解决方法

您可以向后倾斜文本。由于变换不适用于非块元素，并且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>

,

如果将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>