.stitched { position: relative; border:2px dashed #fff; background: #ff0030; width: 356px; height: 40px; margin: 10px 10px 10px -5px; 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; } .parent1 { border:1px solid #000000; background: #FCFCFc; width: 350px; margin: 20px; height: 350px; box-shadow: 0 0 0px 8px #FAFAFA; line-height: 120px; text-align: center; -moz-box-shadow: 0 0 20px 2px black; -webkit-box-shadow: 0 0 20px 8px black; } .stitched2 { border:2px dashed #fff; background: #ff0030; width: 356px; position: relative; height: 40px; margin: 10px 10px 10px -5px; 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; } .stitched2:after { content:""; position:absolute; border-top:14px solid transparent; border-right:0px solid transparent; border-left:14px solid transparent; border-bottom:14px solid #99001D; top:-37px; left: -10px; background: transparent; z-index: 1; } .stitched2:before { content:""; position:absolute; border-top:14px solid transparent; border-right:14px solid transparent; border-left:0px solid transparent; border-bottom:14px solid #99001D; top:-37px; right: -10px; background: transparent; z-index: 1; }
<div class="parent1"> <div class="stitched"> </div> <div class="stitched2"> </div> </div>