Html
    Css
    Js

    
                        
 * {
	margin:0;
	padding:0;
}
html {
	height:100%;
}
.main {
	width:50%;
	margin:0 auto;
	position:relative;
}
.box_lay {
	position:absolute;
	height:100%;
	left:50%;
	margin-left:-4.13rem;
}
.box_graph {
	width:0;
	height:0;
	border:4rem solid transparent;
	border-radius:50%;
	cursor:pointer;
	position:absolute;
}
.box_graph p {
	color:#fff;
	position:relative;
	width:1.5rem;
	word-break:break-all;
	font-size:.6rem;
	left:-2.5rem;
	top:-.8rem;
}
.box_graph.st {
	border-left-color:#8064A2;
	transform:rotate(45deg);
}
.box_graph.st p {
	transform:rotate(-45deg);
}
.box_graph.nd {
	border-left-color:#5F5BAE;
	transform:rotate(135deg);
	left:.25rem;
}
.box_graph.nd p {
	transform:rotate(-135deg);
}
.box_graph.rd {
	border-left-color:#4BACC6;
	transform:rotate(-45deg);
	top:.25rem;
}
.box_graph.rd p {
	transform:rotate(45deg);
}
.box_graph.fin {
	border-left-color:#4691CC;
	transform:rotate(-135deg);
	left:.25rem;
	top:.25rem;
}
.box_graph.fin p {
	transform:rotate(135deg);
}
.box_desc {
	position:absolute;
	width:5rem;
	border-radius:15px;
	font-size:13px;
	height:3.5rem;
	padding:0;
	z-index:-1;
	overflow:hidden;
}
/* 左上、左下半圆详情 */
    .box_dec.st .box_desc,.box_dec.rd .box_desc {
	left:-5.5rem;
	padding-right:2.5rem;
}
/* 左下、右下半圆详情 */
    .box_dec.rd .box_desc,.box_dec.fin .box_desc {
	top:5rem;
}
/* 右上、右下半圆详情 */
    .box_dec.nd .box_desc,.box_dec.fin .box_desc {
	left:5.5rem;
	padding-left:2.5rem;
}
.box_dec.st .box_desc {
	border:3px solid #8064A2;
}
.box_dec.rd .box_desc {
	border:3px solid #4BACC6;
}
.box_dec.nd .box_desc {
	border:3px solid #5F5BAE;
}
.box_dec.fin .box_desc {
	border:3px solid #4691CC;
}
.box_desc .box_inner {
	position:absolute;
	left:0;
	top:0;
	right:-17px;
	bottom:0;
	overflow-x:hidden;
	overflow-y:scroll;
	padding:0 .15rem;
	text-align:left;
}
.box_dec.fin p,.box_dec.nd p {
	text-align:right;
}
.box_inner p {
	padding:.15rem 2rem 0 0;
}
.half_t .box_child:last-child .box_inner p,.half_b .box_child:last-child .box_inner p {
	padding:.15rem 0 0 2.5rem;
}

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

css定位图形改(原创)

之前是写死的宽高,扇形图中的文字也会因为屏幕不同出现一定偏差,修改后显示结果会直观很多
四个方框里的文字做了溢出滚动处理,及隐藏滚动条,直接在里展示,鼠标滚动时可能无法滚动

0