<div id="pti-flag"> <div class="green-strip"></div> <div class="red-strip"></div> <div id="cover"> <div id="crescent-moon"> </div> <div id="star"></div> </div> </div>
body { margin: 30px; background: #efefef; } #pti-flag { position: relative; width: 360px; height: 240px; } .green-strip { background: #008000; height: 120px; } .red-strip { background: #FF0000; height: 120px; } #cover { position: absolute; top: 0; width: 358px; } #crescent-moon { width: 145px; height: 145px; border-radius: 50%; -ms-box-shadow: 17px 17px 0 0 #fff; -o-box-shadow: 17px 17px 0 0 #fff; -webkit-box-shadow: 17px 17px 0 0 #fff; box-shadow: 17px 17px 0 0 #fff; -ms-transform: rotate(100deg); /* IE 9 */ -webkit-transform: rotate(100deg); /* Chrome, Safari */ -o-transform: rotate(100deg); transform: rotate(100deg); margin: 30px 0 0 120px; } #star:before { content: "\2605"; color: #fff; font-size: 4em; left: 173px; position: absolute; top: 50px; -ms-transform: rotate(50deg); /* IE 9 */ -webkit-transform: rotate(50deg); /* Chrome, Safari */ -o-transform: rotate(50deg); transform: rotate(50deg); }