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

Question

是否可以在 CSS 中创建一个看起来像这样的按钮：

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

Answer 1

简短的回答是是的，可以做到。我继续尝试。

这些是我采取的步骤：

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

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

然后我将绘图转换为 css，方法是选择“复制 css 属性”并手动添加 :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/