变换-仅倾斜定位标记背景

Question

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

Answer 1

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