【发布时间】：2015-08-26 10:08:22
【问题描述】：
我正在寻找一种简单的方法，使用单个标签（仅<a>）在边框上创建倾斜效果，但保持文本原样。
我会知道如何处理内部或外部的跨度，但我不想在页面上添加额外的、几乎为零的 HTML。
以下示例。
【问题讨论】：
标签： css button transition effect skew
【发布时间】：2015-08-26 10:08:22
【问题描述】：
您也可以为此使用剪辑路径，例如：
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>【讨论】：
您可以取消子元素的倾斜，即提供您为父元素指定的相反倾斜坐标。
假设你有下面的 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;
}
【讨论】：
-
我也喜欢这个答案，对同一个问题有两个很好的答案，尽管我可能会选择 css 三角形，因为它的 HTML 较少：-P
-
只是一个猜测，但是让 html 像 text 那样不是更容易吗？这样您就没有两个单独的 HTML 类/元素（没有跨度）。然而，CSS 可以保持不变。除此之外：使用类，而不是 ID。 :) 感谢您的意见！
-
在您的 CSS 的帮助下，我使用了上面建议的 span-method。我必须为锚点和跨度元素添加“显示：内联块”，因为它们不是内联元素。但是现在效果很好！ :)
-
@SanderSchaeffer - 类可能是最好的，然后您可以在其他元素上重新使用样式，如果您出于某种原因决定更改内部元素也不会导致问题，即@987654326 @
-
@SanderSchaeffer Tony Leigh，是的，当你想重用东西时，类会好得多，我有一个坏习惯，就是有时不考虑类重用。更新了答案。
您可以使用CSS triangle 技巧简单地实现所需的效果。 只需为 ::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>【讨论】：
-
为什么一个边框是白色的，一个是透明的？另外，为什么每个三角形的上边距为-6px，左右边距不同？
-
这只是一个错误。我把它改成了透明的。上边距和左/右边距有不同的边距，因为我们需要将文本的垂直对齐设置为居中，所以应该添加上边距（-6px 看起来不错）。左/右 -25px：15px - 它是三角形的大小，10px - 只需在文本和三角形之间添加一些空间。
-
我认为不可能让它自动等于按钮本身的高度？最有可能的是，所有按钮都将具有相同的高度，因为字体大小不会改变......但仍然如此。那会很好。
-
@SanderSchaeffer 可能 - 请参阅我的答案中的第一个 js fiddle - 尝试将值更改为 % 看看会发生什么，尽管我不确定伪元素的宽度，他们会比较什么到 ？不过，如果在按钮上也使用 Vw 单位并且您不介意随视口改变尺寸，那么 Vw 单位可能会起作用！
-
可以，但不能很好地扩展。如果您需要响应式文本等，那么它会包含一定程度的痛苦来维护
一种解决方案是在:before 和:after 上使用css triangles。此解决方案留下最干净的 HTML。
.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 的元素上使用粗边框，边框相交的点提供三角形所需的对角线（一个很好的可视化是查看corner of a picture frame，两个边框相交并创建三角形）。重要的是一个边框是透明的，一个是彩色的，并且它们是相邻的（即左和上，而不是左和右）。您可以通过调整边框大小来调整边的大小、方向和长度。
对于您的按钮，我们还使用浮动和负边距将它们拉到元素之外并将它们对齐。定位绝对值和负左右值也将是定位的一个很好的解决方案
你也可以:hover states
.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 在所有相关选择器中都排在第一位。如果悬停第二个this would happen
【讨论】：