<div class="module"> <h2>Community <a href="#">Blue</a></h2> <!-- stuff in module --> </div>
.module{ width: 300px; } .module h2 { position: relative; background: #ccc; padding: 0 0 0 10px; font-size: 16px; /* Thickness of the bar more easily achieved with line-height since padding would push link inward. */ line-height: 2; } .module h2 a { float: right; position: relative; text-decoration: none; color: white; padding: 0 10px 0 15px; border-left: 5px solid white; background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #123456, #999999); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(top, #123456, #999999); /* FF3.6 */ background-image: -ms-linear-gradient(top, #123456, #999999); /* IE10 */ background-image: -o-linear-gradient(top, #123456, #999999); /* Opera 11.10+ */ background-image: linear-gradient(top, #123456, #999999); } .module h2 a:before{ background: transparent; width: 0px; height: 6px; display: block; content: ""; position: absolute; left: 0; border-left: 5px solid white; border-right: 0px solid green; border-top: 5px solid white; border-bottom: 5px solid rgba(255,255,255,0); } .module h2 a:after{ background: transparent; width: 0px; height: 6px; display: block; content: ""; position: absolute; left: 0; bottom: 0; border-left: 5px solid white; border-right: 0px solid green; border-top: 5px solid rgba(255,255,255,0); border-bottom: 5px solid white; } .module h2:after{ position: absolute; width: 0; height: 0; content: ""; left: 235px; border-left: 0px solid green; border-right: 5px solid white; border-top: 5px solid rgba(255,255,255,0); border-bottom: 5px solid rgba(255,255,255,0); top: 11px; }