<div id="ribbon"> <div class="container"> <div class="base"></div> <div class="top_corner"></div> <div class="bottom_corner"></div> </div> </div>
body { margin: 0; padding: 0; } #ribbon { width: 280px; height: 180px; margin: 30px 0 0; position: relative; overflow: hidden; } /* top and bottom border of ribbon */ #ribbon .container { position: relative; width: 250px; height: 100px; overflow: hidden; margin: 0; border-top: 1px solid #631a15; border-bottom: 1px solid #631a15; } #ribbon .base { width: 200px; height: 100px; position: relative; z-index: 2; /* generated in colorzilla, http://www.colorzilla.com/gradient-editor/ */ background: #c73b3c; /* Old browsers */ background: -moz-linear-gradient(left, #c73b3c 0%, #b8201f 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#c73b3c), color-stop(100%,#b8201f)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #c73b3c 0%,#b8201f 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #c73b3c 0%,#b8201f 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #c73b3c 0%,#b8201f 100%); /* IE10+ */ background: linear-gradient(to right, #c73b3c 0%,#b8201f 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c73b3c', endColorstr='#b8201f',GradientType=1 ); /* IE6-9 */ } /* Add dashed line (stitches) on top and bottom of ribbon */ #ribbon .base:after { content: ''; position: absolute; top: 6px; width: 242px; height: 86px; border-top: 1px dashed #631a15; border-bottom: 1px dashed #631a15; } #ribbon .top_corner { width: 100px; height: 100px; background: #b8201f; position: absolute; z-index: 1; bottom: 60px; left: 140px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #ribbon .bottom_corner { width: 100px; height: 100px; background: #b8201f; position: absolute; bottom: -60px; right: 10px; z-index: 1; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }