Html 带角的3D CSS按钮

我附上了一张图片，想知道是否有人知道如何使用CSS和html制作按钮？我尝试过边界和阴影，但无法获得正确的角落

我需要他们是各种颜色（在不同的背景），这就是为什么我问。我不介意使用不同的颜色，也不介意使用RGBA值。按钮总是比背景稍微暗一点

---

谢谢你抽出时间

此链接将为您提供您想要的：

---

实现这一点的简单方法是应用多个

box shadow

s：

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);       
}

---

转角在哪里？我只能看到阴影…我所说的角形是指阴影不能产生这种效果，除非我遗漏了什么？如果你尝试使用阴影，它会在按钮与其阴影“连接”的角落留下一个间隙。谢谢链接。不幸的是，生成器没有考虑按钮上角的角度外观。至少我找不到。非常感谢。这就是我要找的！传奇

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);       
}