Css 带三角形的3D按钮

我尝试创建一个带有三角形边缘的3d ish按钮。

不幸的是，我的三角形部分有问题。底层与顶层不匹配。 我对三角形使用了边界技术。底层应距离顶层4倍

JSFiddle也在底部

<a class="btn" href="#"><span>Button text here</span></a>

scss:

.btn {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background: #EAC118;
    padding: 0 30px;
    line-height: 55px;

    span {
        display: block;

        &::after {
            content: '';
            position: absolute;
            top: 0;
            right: -16px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 27px 0 28px 16px;
            border-color: transparent transparent transparent #EAC118;
        }
    }

    &::before {
        content: '';
        position: absolute;
        left: 4px;
        bottom: -4px;
        right: -6px;
        height: 100%;
        z-index: -1;
        background: #ff0000;
    }    

    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: -22px;
        width: 0;
        height: 0;
        z-index: -1;
        border-style: solid;
        border-width: 24px 0px 28px 16px;
        border-color: transparent transparent transparent #ff0000;
    }
}

scss：
.btn{
显示：内联块；
垂直对齐：中间对齐；
位置：相对位置；
背景：#EAC118；
填充：0 30px；
线高：55px；
跨度{
显示：块；
&：：之后{
内容：''；
位置：绝对位置；
排名：0；
右图：-16px；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：27px 0 28px 16px；
边框颜色：透明#EAC118；
}
}
&：：之前{
内容：''；
位置：绝对位置；
左：4px；
底部：-4px；
右图：-6px；
身高：100%；
z指数：-1；
背景：#ff0000；
}    
&：：之后{
内容：''；
位置：绝对位置；
底部：0；
右：-22px；
宽度：0；
身高：0；
z指数：-1；
边框样式：实心；
边框宽度：24px 0px 28px 16px；
边框颜色：透明#ff0000；
}
}

---

这是怎么回事-我刚刚让跨度继承了相同的样式，并将其向底部和右侧偏移了-5px，然后制作了另一个箭头与外部箭头对齐：

.btn，
.影子{
显示：内联块；
字体大小：400；
文本对齐：居中；
空白：nowrap；
垂直对齐：中间对齐；
位置：相对位置；
背景：#EAC118；
填充：0 30px；
文字装饰：无；
线高：56px；
文本转换：大写；
字体系列：Arial；
颜色：#ffffff；
}
.btn：：之后，
影子：之后，
影子：以前{
内容：''；
位置：绝对位置；
底部：0；
左：100%；
宽度：0；
身高：0；
z指数：1；
边框样式：实心；
边框宽度：28px 0px 28px 15px；
边框颜色：透明#EAC118；
}
.影子{
位置：绝对位置；
顶部：5px；
左：5px；
底部：-5px；
右：-5px；
z指数：-1；
背景：#ff0000；
}
.shadow：：之后{
边框颜色：白色#ff0000；
左：计算（100%-3倍）；
z指数：1；
}
影子：以前{
边框颜色：透明#ff0000；
底部：5px；
z指数：2；
}
.shadow>span{
显示：块；
宽度：5px；
高度：5px；
边框顶部：5px实心#ffffff；
背景：#ff0000；
位置：绝对位置；
顶部：-5px；
右：-3px；
z指数：3；
}

可能很快就会简化工作

.btn{
显示：内联块；
字体大小：400；
文本对齐：居中；
空白：nowrap；
垂直对齐：中间对齐；
位置：相对位置；
背景：#EAC118；
填充：0 30px；
文字装饰：无；
线高：55px；
文本转换：大写；
字体系列：Arial；
颜色：#ffffff；
过滤器：投影（6px 4px 0px#ff0000）；
}
.btn跨度{
显示：块；
}
.btn span:：之后{
内容：''；
位置：绝对位置；
排名：0；
右图：-16px；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：27px 0 28px 16px；
边框颜色：透明#EAC118；
}

---

这里有一个线性渐变的想法：

：根目录{
--c:黄色；
--三角形：
线性梯度（var（--c），var（--c））0 0/calc（100%-30px）100%无重复，
线性梯度（至左下角，透明50%，var（--c）0）100%0/30px 50%无重复，
线性梯度（至左上角，透明50%，var（--c）0）100%100%/30px 50%无重复
}
.盒子{
宽度：200px；
高度：40px；
利润率：20px；
填充：10px；
背景：var（--三角形）；
位置：相对位置；
}
.盒子：以前{
内容：“；
位置：绝对位置；
顶部：5px；
左：10px；
宽度：100%；
身高：100%；
背景：var（--三角形）；
过滤器：色调旋转（100度）；
z指数：-1；
}

这是一个3D按钮

所有这些都是很好的解决方案，我觉得我达到了相同或相似的效果，但问题是三角形的点并不相邻。见附件设计。但这可能是不可能的。在你的设计中，箭头的点对齐，所以它不是一个合适的阴影。如果你想要这样，那么你必须为背景创建一个不同形状的三角形image@levipadre见编辑，有点老套，但似乎实现了你想要的ICE one@Pete。非常感谢。不幸的是，如果背景是一个图像，它也不起作用。我刚注意到。