Question

我正在寻找一种简单的方法，使用单个标签（仅<a>）在边框上创建倾斜效果，但保持文本的原样。

我知道如何处理内部或外部的跨度，但我不希望在页面上有额外的，几乎为零的含义。

以下示例。

enter image description here

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;
}

Answer 2

您可以使用CSS triangle技巧简单地完成所需的效果。只需为:: before和:: after伪类添加一些样式。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

一种解决方案是在:before和:after上使用css triangles。这个解决方案留下了最干净的HTML。

This jsfiddle demonstrates

.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

Answer 4

您也可以为此使用剪切路径，例如：

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>

CSS：歪斜按钮边框，而不是文本

4 个答案: