A 3d look Ribbon with Stitched Effect

HTML

<div>
    <div class="stitched">&nbsp;O</div>
</div>

CSS

.stitched {
    position: relative;
    border:2px dashed #fff;
    background: #ff0030;
    width: 356px;
    height: 40px;
    margin: 30px 10px 10px 20px;
    box-shadow: 0 0 0 8px #ff0030;
    line-height: 120px;
    text-align: center;
    -moz-box-shadow: 0 0 0 8px #ff0030;
    -webkit-box-shadow: 0 0 0 8px #ff0030;
    z-index: 10;
}

.stitched:after {
    content:"";
    position:absolute;
    border-bottom:14px solid transparent;
    border-right:0px solid transparent;
    border-left:14px solid transparent;
    border-top:14px solid #99001D;
    margin-top:49px;
    left: -9px;
    background: transparent;
    z-index: -1;
}

.stitched:before {
    content:"";
    position:absolute;
    border-bottom:14px solid transparent;
    border-right:14px solid transparent;
    border-left:0px solid transparent;
    border-top:14px solid #99001D;
    margin-top:49px;
    right: -9px;
    
    z-index: -1;
}