CSS：扭曲按钮的边框而不是文本

Question

我正在寻找一种简单的方法，只需要一个标签（只有<a>）就可以在边框上创建倾斜效果，但保持文本不变。

我知道可以使用内部或外部的标签来实现，但我不想在页面上添加额外的、几乎没有意义的HTML。

以下是示例：

- Sander Schaeffer

Answer 1

你可以对子元素进行反斜，即提供与父元素指定的相反的斜坐标。 这里是一个可用的示例 假设你的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;
}

- Saumil

---

我也喜欢这个答案，两个好的解决方案，尽管我可能会选择CSS三角形，因为它使用更少的HTML :-P - Toni Leigh

只是猜测，但是把HTML写成<a href="#"><span>text</span></a>不是更容易吗？这样你就不需要两个单独的HTML类/元素（span是none）。CSS可以保持不变。除此之外：使用类而不是ID。:) 谢谢你的建议！ - Sander Schaeffer

借助您的CSS一点帮助，我按照我上面建议的使用了span方法。 我不得不为锚点和span元素添加'display：inline-block'，因为它们不是内联元素。 但现在它运行得非常好！ :) - Sander Schaeffer

@SanderSchaeffer - 最好使用类，这样您可以在其他元素上重复使用样式，并且如果您因某种原因决定更改内部元素，它不会造成问题，即 <a class='skew-outer'><span class='skew-inner' ... - Toni Leigh

@SanderSchaeffer Tony Leigh，是的，当你想要重复使用代码时，类会更好。我有一个坏习惯，有时候不考虑类的重用性。已更新答案。 - Saumil

Answer 2

你可以使用CSS三角形技巧轻松实现所需效果。只需为::before和::after伪类添加一些样式即可。

.skewed_button {
    background: #32CD32;
    color: #000;
    text-decoration: none;
    font-size: 20px;
    display: inline-block;
    height: 30px;
    margin-left: 15px;
    padding: 6px 10px 0;
}
.skewed_button::before {
    content: "";
    float: left;
    margin: -6px 0 0 -25px;
    border-left: 15px solid transparent;
    border-bottom: 36px solid #32CD32;  
    height: 0px;
}
.skewed_button::after {
    content: "";
    float: right;
    margin: -6px -25px 0 0 ;
    border-left: 15px solid #32CD32;
    border-bottom: 36px solid transparent;  
    height: 0px;
}

<a href="#some_url" class="skewed_button">Some Text</a>

- Vadym Pechenoha

---

为什么一个边框是白色的，而另一个是透明的？此外，为什么每个三角形上有-6px的顶部边距以及不同数量的左、右边距？ - Toni Leigh

这只是一个错误。我已将其更改为透明。由于我们需要将文本垂直对齐到中心，因此顶部和左/右边缘存在不同的边距，因此应添加顶部边距（使用-6px看起来很好）。左/右边缘减去25px：15px是三角形的大小，10px只是在文本和三角形之间添加一些空间。 - Vadym Pechenoha

我猜自动让它等于按钮本身的高度是不可能的吧？很可能，所有的按钮都会有相同的高度，因为字体大小不会改变..但还是希望能够实现这一点。 - Sander Schaeffer

@SanderSchaeffer 可能可以看看我回答中的第一个 js fiddle - 尝试将值更改为 % 并查看发生了什么，不过我不确定伪元素上的宽度会比较什么？如果在按钮上也使用 vw 单位并且您不介意大小随视口而变化，那么 vw 单位可能也可行！ - Toni Leigh

可以，但不会很好地扩展。如果需要具有响应式文本等功能，则维护可能会带来一定程度的痛苦。 - GorillaApe

Answer 3

您也可以使用clip-path来实现这一点，例如： clip-path: polygon(14px 0％，100％ 0％，calc（100％ - 14px）100％，0％ 100％);

.skewed_button {
    background: yellow;
    text-decoration: none;
    display: inline-block;
    padding: 10px 20px;
    clip-path: polygon(14px 0%, 100% 0%, calc(100% - 14px) 100%, 0% 100%);
}

<a href="" class="skewed_button">Some Text</a>

- uNmAnNeR

Answer 4

一种解决方案是在 :before 和 :after 上使用 CSS 三角形。这种解决方案可以保持最干净的 HTML。 这个 jsfiddle 示例演示了该方法。

.is-skewed {
    width: 80px;
    height: 40px;
    background-color: #f07;
    display: block;
    color: #fff;
    margin-left: 40px;
}

.is-skewed:before,
.is-skewed:after {
    content: '';
    width: 0;
    height: 0;
}

.is-skewed:before {
    border-bottom: 40px solid #f07;
    border-left: 20px solid transparent;
    float:left;
    margin-left: -20px;
}

.is-skewed:after {
    border-top: 40px solid #f07;
    border-right: 20px solid transparent;
    float:right;
    margin-right: -20px;
}

CSS三角形使用0维度元素的粗边框，其中边框相遇的点提供所需的对角线以形成三角形（一个好的想象是看图片框的角落，两个边框相遇并创建三角形）。重要的是，一个边框是透明的，一个是有色的，并且它们是相邻的（即左和上，而不是左和右）。您可以通过调整边框大小来调整大小、方向和边长。

对于您的按钮，我们还使用浮动和负边距将其拉出元素并将其正确对齐。绝对定位和负左右值也是定位的好解决方案。

你也可以设置:hover状态。

.is-skewed:hover {
    background-color: #40f;
}
.is-skewed:hover:after {
    border-top-color: #40f;    
}
.is-skewed:hover:before {
    border-bottom-color: #40f;
}

重要的是注意使用background-color和border-color，并且在所有相关选择器中:hover首先出现。如果鼠标悬停在第二个位置，将会发生什么。

- Toni Leigh