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

Question

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

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

Answer 1

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

这些是我采取的步骤：

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

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

然后我通过选择“复制 css 属性”并手动添加 :before 和 :after 元素并进行一些微调，将绘图转换为 css。这是我想出的（无前缀的）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/