页脚的CSS功能区效果

Question

所以我对我的导航做了一个带状效果没有问题，但是当我试图用页脚做同样的事情时，我遇到了没有出现正确折叠的问题。这是我为页脚功能区写​​的css。

.ribbon {
    background:#8346ab;
    padding:1em;
    margin-left:-40px;
    padding-left:40px;
    padding-right:40px;
    position:relative;
    width:100%;
}
.ribbon:after, .ribbon:before{
    content:"";
    display:block;
    position:absolute;
    top:-10px;
    border:10px solid #1f364c;
    border-top-width:0;
}
.ribbon:after{
    right:0;
    border-right-color:transparent;
    border-top-width:0;
    border-left-width:0;
    border-right-width:40px;
}
.ribbon:before {
    left:0;
    border-left-color:transparent;
    border-top-width:0;
    border-right-width:0;
    border-left-width:40px;
}

这应该有效，但不确定为什么没有出现正确的折叠。有什么建议吗？