html右侧隐藏功能区,html – CSS功能区上的三角形阴影

我试图复制像素一样完美,因为我可以得到并且我很难尝试在右边做阴影.这可能与CSS？

CSS：

*{margin:0px;padding:0px;}

html {

width:100%;

height:100%;

text-align: center;

}

.bold {

font-weight:700;

}

#ribbon {

padding: .34em 1em;

margin: 0;

margin-top: 5%;

position:relative;

color: #000;

text-align: center;

letter-spacing:0.1em;

padding-top:12px;

padding-bottom:12px;

display: inline-block;

background: #ffd82b;

z-index:100;

box-shadow: 0 7px 0px -2px #ebeced;

}

#ribbon:after {

content: "";

width:3.2em;

bottom:-.5em;

position:absolute;

display:block;

border: .9em solid #ffd82b;

box-shadow: 0 7px 0px -2px #ebeced;

z-index:-2;

}

#ribbon:after {

right: -4.3em;

border-left-width: .75em;

border-right-color:transparent;

}

#content:after {

content:"";

bottom:-.5em;

position:absolute;

display:block;

border-style:solid;

border-color: #fc9f42 transparent transparent transparent;

z-index:-1;

}

#content:before {

content:"";

top:-.5em;

transform: rotate(90deg);

position:absolute;

display:block;

border-style:solid;

border-color: #fc9f42 transparent transparent transparent;

z-index:-1;

}

#content:before {

left: 0;

border-width: .5em 0 0 .5em;

}

#content:after {

right: 0;

border-width: .5em .5em 0 0;

}

HTML：

Special Offer: Recieve bonus rewards points for signing up