css - CSS:倾斜按钮边框，而不是文本

我正在寻找一种简单的方法，使用单个标记（只是<a>）在边框上创建倾斜效果，但是保持文本的原样。
我知道如何使用内外跨距，但我不想在页面上有额外的、几乎零意义的HTML。
下面的例子。

最佳答案

您可以取消显示子元素，即提供与您为父元素指定的相反的倾斜坐标。
Here is a working example
假设你有下面的html文件，

<div class="btn">
    <button><div class="btn-text">Click</div></button>
</div>

如果我们将父元素倾斜20deg那么我们应该将子元素倾斜-20deg作为，

.btn {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
}
.btn-text {
    -ms-transform: skewX(-20deg); /* IE 9 */
    -webkit-transform: skewX(-20deg); /* Safari */
    transform: skewX(-20deg);
    padding: 20px;
}