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

Question

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

我知道如何处理内部或外部的跨度，但我不想在页面上有额外的、几乎为零的意思 HTML。

示例如下。

Answer 1

您可以取消倾斜子元素，即提供与您为父元素指定的相反的倾斜坐标。

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

Answer 2

一种解决方案是在 :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，两个边界相交并形成三角形的地方）。重要的是，一个边框是透明的，一个边框是彩色的，并且它们是相邻的（即左和上，而不是左和右）。您可以通过调整边框大小来调整边的大小、方向和长度。

对于您的按钮，我们还使用浮动和负边距将它们拉出元素并使其正确对齐。 position absolute 和 negative left and right values 也会很好的解决 positioning

你也可以: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 3

您可以使用 CSS triangle 技巧简单地达到预期的效果。只需为 ::before 和 :: after pseudo-类.

添加一些样式

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

Answer 4

你也可以使用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>

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

CSS: Skew a buttons border, not the text

css

button

transition

effect

skew