Html 试图在右侧获得与左侧相同的效果[css3色带]

我试图在右侧获得与右侧相同的3d阴影效果

请看这把小提琴：

右边看起来并不完美

提前感谢：

.丝带{ 边框：1px实心000000； 位置：相对位置； 宽度：70%； 高度：30px； 背景色：5ad2f0； 文本对齐：左对齐； 边界半径：5px 5px 5px； 保证金：5px0； 颜色：白色； 字体大小：粗体； 字体大小：12px； 左侧填充：20px； } .ribbon:之后{ 内容：； 位置：绝对位置； 底部：-14px； 右：1px； 显示：内联块； 宽度：0； 身高：0； 边框顶部：15px实心透明； 边框底部：15px实心透明； 左边框：16px实心3AAC9； z指数：-1 } .ribbon:之前{ 内容：； 位置：绝对位置； 底部：-14px； 左：0px； 显示：内联块； 宽度：0； 身高：0； 边框顶部：15px实心透明； 边框底部：15px实心透明； 右边框：16px实心3AAC9； z指数：-1 }

---

如果我想给它加个边框。它会毁掉整个丝带吗？添加了一个边框。无法将边框添加到功能区背景部分。也许还有别的办法。另外，你应该在问之前试着去做。在我尝试之前，我通常不知道你问题的答案。

<div class="ribbon">WOW</div>

.ribbon {
position:relative;
width: 100%;
height: 30px;
background-color: #5ad2f0;
text-align: left;
border-radius: 5px 0px 0px 5px; 
margin:5px 0;
color:white;
font-weight:bold;
font-size:12px;
padding-left: 20px;   
}
.ribbon:after {
    content: "";
    position: absolute;
    bottom: -10px;
    right:2px;
    display: inline-block;
    width: 0; 
    height: 0; 
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 16px solid #3aacc9;
    z-index:-1
}
.ribbon:before {
    content: "";
    position: absolute;
    bottom: -14px;
    left:1px;
    display: inline-block;
    width: 0; 
    height: 0; 
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 16px solid #3aacc9;
    z-index:-1
}