Html
    Css
    Js

    
                        
 .box {
	border:1px solid #ddd;
	width:50%;
	margin:0 auto;
}
.box_graph {
	width:0;
	height:0;
	border:12rem solid transparent;
	border-radius:50%;
	cursor:pointer;
	position:relative;
	position:absolute;
}
.box_graph p {
	color:#fff;
	position:relative;
	width:5.5rem;
	word-break:break-all;
	font-size:30px;
}
.box_graph.st {
	border-left-color:#8064A2;
	transform:rotate(45deg);
}
.box_graph.st p {
	transform:rotate(-45deg);
	left:-8rem;
	top:-4.5rem;
	/* left:-4rem;
	top:-2.5rem;
	*/
}
.box_graph.nd {
	border-left-color:#5F5BAE;
	transform:rotate(135deg);
	left:1rem;
}
.box_graph.nd p {
	transform:rotate(-135deg);
	/* left:-4.25rem;
	top:-2.5rem;
	*/
      left:-9rem;
	top:-5.25rem;
}
.box_graph.rd {
	border-left-color:#4BACC6;
	transform:rotate(-45deg);
	top:1rem;
}
.box_graph.rd p {
	transform:rotate(45deg);
	left:-8rem;
	top:-4rem;
}
.box_graph.fin {
	border-left-color:#4691CC;
	transform:rotate(-135deg);
	left:1rem;
	top:1rem;
}
.box_graph.fin p {
	transform:rotate(135deg);
	/* left:-4.25rem;
	top:-2rem;
	*/
      left:-9.25rem;
	top:-3.5rem;
}
.box_child {
	position:relative;
}
.box_desc {
	position:absolute;
	width:12rem;
	border-radius:15px;
	font-size:13px;
	height:10rem;
	padding:0rem 1rem 1rem 1rem;
	z-index:-1;
}
.box_dec.st .box_desc {
	border:3px solid #8064A2;
	left:-12.5rem;
	padding-right:6rem;
}
.box_dec.nd .box_desc {
	border:3px solid #5F5BAE;
	left:21.5rem;
	padding-left:3rem;
	width:15rem;
}
.box_dec.rd .box_desc {
	border:3px solid #4BACC6;
	left:-12.5rem;
	top:16rem;
	padding-right:6rem;
	width:12rem;
}
.box_dec.fin .box_desc {
	border:3px solid #4691CC;
	left:21.5rem;
	top:16rem;
	padding-left:3rem;
	width:15rem;
}

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

css定位图形

这种需求用图做是做简单的,但是low了一点,目前是用的定位做的,弊端也很多 , 也只能用在pc端,后续有时间会改进

1
      .0
      2018/10/19 19:19:45
      这是能自适应响应式的版本
      http://www.jq22.com/webqd5170

      回复