时间戳

首页 > 解决方案 > 变换 - 仅倾斜锚标记背景

css - 变换 - 仅倾斜锚标记背景

问题描述

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

标签： csstransformcss-transformsskew

解决方案

您可以将文本向后倾斜。由于 transform 不适用于非块元素，并且a是内联标签，因此您需要将a标签更改display为inline-blockor 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>

推荐阅读