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

Question

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



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

Answer 1

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

这些是我采取的步骤:

我在 Sketch 中打开了你的位图，这是我最喜欢的 Web 图形工具

我放大到您的位图，用圆 Angular 矩形勾勒出轮廓并赋予它正确的颜色

我开始添加 box-shadow s，外部和插入，以尽可能接近地复制位图。请注意，我只对框阴影使用了黑色和白色(具有不同的 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);
}

和一个 fiddle 演示: http://jsfiddle.net/pn4qk3wL/