Html
    Css
    Js

    
                        
* {
	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);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css3十字圆形(原创)

0