* { margin:0; padding:0; } .sector { width:0; height:0; border:6rem solid transparent; border-radius:50%; cursor:pointer; position:relative; margin:40px auto; } .sec_cor { border-color:#8064A2 #5F5BAE #537ABA #4BACC6; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); } .sec_modal { width:12rem; background:#fff; height:10px; position:absolute; top:-5px; left:-6rem; } .sec_modal_x { -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); } .sec_modal_y { -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); -ms-transform:rotate(135deg); transform:rotate(135deg); } .sec_mes { padding:20px; } .case_box { transform:rotate(-45deg); }