.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;
}
这种需求用图做是做简单的,但是low了一点,目前是用的定位做的,弊端也很多 , 也只能用在pc端,后续有时间会改进