.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端,后续有时间会改进