<style>
.wrap{ width: 240px; height: 240px;
border-bottom-left-radius: 120px;
border-bottom-right-radius: 120px;
border-top-right-radius: 120px;
background:#b1e4ff;
border:2px solid #789cb6;
box-shadow: 5px 5px 7px #999;
-moz-border-bottom-left-radius: 120px;
-moz-border-bottom-right-radius: 120px;
-moz-border-top-right-radius: 120px;
position:relative;margin:10px;
}
.font_o{font-size:300px;color:#fff; position:absolute;left:0;top:0;width: 240px; height: 240px;text-align:center;
line-height:210px; font-family:"Arial", Gadget, sans-serif;}
.tip{border-color:#fff transparent transparent transparent;border-style:solid;border-width:50px;font-size:0; position:absolute;top:-40px;left:-40px;
-webkit-transform: rotateZ(135deg);
-moz-transform: rotate(135deg);
transform: rotateZ(135deg);
}
.tip_2{width:50px;height:50px; background:#fff; position:absolute;top:25px; left:25px;
-webkit-transform: rotateZ(135deg);
-moz-transform: rotate(135deg);
transform: rotateZ(135deg);
}
</style>
<div class="wrap">
<div class="font_o">o</div>
<div class="tip"></div>
<div class="tip_2"></div>
</div>