3D CSS按钮带有倾斜的角落

Question

我附上了一张图片，想知道有没有人知道如何使用CSS和HTML制作按钮？我已经尝试了边框和阴影效果，但无法正确处理角落。

我需要它们是不同颜色的(在不同的背景下)，这就是为什么我会问的原因。我不介意使用不同的颜色或只使用RGBA值。按钮的颜色总是比背景稍微暗一些。

感谢您的时间！

- Simon

---

拐角在哪里？我只能看到影子... - Adriano Repetti

我所说的斜角是指这种效果无法通过阴影来实现，除非我漏掉了什么？如果你尝试使用阴影来实现它，会在按钮与其阴影“连接”的角落处留下一个间隙。 - Simon

Answer 1

实现这一效果的简单方法是应用多个box-shadow：

a{
    background: #ccc;
    display: block;
    box-shadow: #000 1px 1px 0,
                #000 2px 2px 0,
                #000 3px 3px 0,
                #000 4px 4px 0,
                #000 5px 5px 0,
                #000 6px 6px 0,
                #000 7px 7px 0,
                #000 8px 8px 0;
}

另一种方法是在伪元素上使用skew：

a{       
    background: #ccc;
    display: block;
    position: relative;   
}

b::before, b::after{
    content: '';
    position: absolute;
    top: 5px;               /* half of the shadow width */
    right: -10px;           /* negative shadow width */
    width: 10px;
    height: 100%;
    background: #000;
    transform: skewY(45deg);    
}

b::after{
    height: 10px;
    width: 100%;
    bottom: -10px;          /* negative shadow height */
    left: 5px;              /* half of the shadow height */
    top: auto;
    right: auto;
    transform: skewX(45deg);       
}

http://jsfiddle.net/b2YpR/2/

- nice ass

Answer 2

这个链接会给你想要的东西： http://cssdeck.com/labs/fancy-3d-button

button {
    position: relative;
    color: rgba(255,255,255,1);
    text-decoration: none;
    background-color: rgba(219,87,5,1);
    font-weight: 700;
    font-size: 3em;
    display: block;
    padding: 4px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
    -moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
    box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
    margin: 100px auto;
    width: 160px;
    text-align: center;

    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    -ms-transition: all .1s ease;
    -o-transition: all .1s ease;
    transition: all .1s ease;

- Nave Tseva

---

谢谢提供链接。不幸的是，该生成器无法处理按钮角落的角度。至少我没能做到。 - Simon