html - 试图在右侧获得与左侧相同的效果 [css3 ribbons]

Question

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

请看这个 fiddle :

http://jsfiddle.net/tdf84nL7/

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

[CSS]

.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
}

右侧看起来并不完美。

提前致谢:)

Answer 1

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

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