如何在CSS中实现这个斜角按钮？

Question

是否可以在CSS中创建一个如下所示的按钮：

当然，我并不是说使用图像作为背景，我可以很容易地做到这一点。我在谈论webkit类型的解决方案。

Answer 1

简短的回答是是的，可以做到。我继续前进并试了一下。

这是我采取的步骤：

• 我在Sketch中打开了你的位图，这是我最喜欢的万物网图形工具
• 我放大了你的位图，用圆角矩形跟踪轮廓并给它正确的颜色
• 我开始在外部和插图中添加box-shadow s，以尽可能接近地复制位图。请注意，我只使用黑色和白色（具有不同的alpha值）作为框阴影。这样，您只需更改background-color。
即可轻松更改按钮的颜色
• 我还为底部阴影和顶部发光添加了两个额外的形状，因为我没有设法仅使用框阴影来实现这一点。只要它只是2个不应成为问题的元素，您可以使用:before和:after伪元素将这些元素包含在您的CSS中。

生成的图像看起来像这样（不完全，但我认为非常接近）：

然后我将绘图翻译成css，选择'copy css attributes'并手动添加：before和：after元素并进行一些微调。这是我提出的（没有前缀的）css：

.button {
    display: inline-block;
    color: #fff;
    text-shadow: 0 0 2px rgba(0,0,0,.3);
    font-family: sans-serif;
    box-shadow:
        inset 0 0 2px 0 rgba(255,255,255,.4),
        inset 0 0 3px 0 rgba(0,0,0,.4),
        inset 0 0 3px 5px rgba(0,0,0,.05),
        2px 2px 4px 0 rgba(0,0,0,.25);
    border-radius: 4px;
    padding: 8px 16px;;
    font-size: 12px;
    line-height: 14px;
    position: relative;
}
.button.red { background: #EA3D33; }
.button.green { background: #7ED321; }
.button.blue { background: #4A90E2; }
.button:before, .button:after {
    content: '';
    display: block;
    position: absolute;
    left: 2px;
    right: 2px;
    height: 3px;
}
.button:before {
    top: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    background: rgba(255,255,255,.6);
    box-shadow: 0 1px 2px 0 rgba(255,255,255,.6);
}
.button:after {
    bottom: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background: rgba(0,0,0,.15);
    box-shadow: 0 -1px 2px 0 rgba(0,0,0,.15);
}

和小提琴演示：http://jsfiddle.net/pn4qk3wL/