先看效果图：

HTML代码如下：

pie

css代码如下：

.pinOfStudent{

background-color: #ffffff;

width: 100%;

position: relative;

}

#tipZone{

position:relative;

left:0;

right:0;

top: 1em;

width:12.5em;

height:12.5em;

margin: 0 auto;

}

#base1 {

margin-top:10px;

z-index:1;

}

#base1 .bing {

background-color: #af9df7;

border-color: #af9df7;

-moz-transform:rotate(72deg);

-webkit-transform:rotate(72deg);

-o-transform:rotate(72deg);

transform: rotate(72deg);

}

#base2{

margin-top:10px;

-moz-transform:rotate(72deg);

-webkit-transform:rotate(72deg);

-o-transform:rotate(72deg);

transform:rotate(72deg);

}

#base2 .bing {

background-color: #93dec8;

border-color: #93dec8;

-moz-transform: rotate(72deg);

-webkit-transform: rotate(72deg);

-o-transform: rotate(72deg);

transform: rotate(72deg);

}

#base3{

margin-top:10px;

-moz-transform:rotate(144deg);

-webkit-transform:rotate(144deg);

-o-transform:rotate(144deg);

transform:rotate(144deg);

}

#base3 .bing{

background-color:#efb486;

border-color:#efb486;

-moz-transform:rotate(72deg);

-webkit-transform:rotate(72deg);

-o-transform:rotate(72deg);

transform:rotate(72deg);

}

#base4{

margin-top:10px;

-moz-transform:rotate(216deg);

-webkit-transform:rotate(216deg);

-o-transform:rotate(216deg);

transform:rotate(216deg);

}

#base4 .bing{

background-color:#f2b6c8;

border-color:#f2b6c8;

-moz-transform:rotate(72deg);

-webkit-transform:rotate(72deg);

-o-transform:rotate(72deg);

transform:rotate(72deg);

}

#base5{

margin-top:10px;

-moz-transform:rotate(288deg);

-webkit-transform:rotate(288deg);

-o-transform:rotate(288deg);

transform:rotate(288deg);

}

#base5 .bing{

background-color:#cae9ff;

border-color:#cae9ff;

-moz-transform:rotate(72deg);

-webkit-transform:rotate(72deg);

-o-transform:rotate(72deg);

transform:rotate(72deg);

}

.part{

position:absolute;

width: 100%;

height: 100%;

clip: rect(0em,12.5em,12.5em,6.25em);

}

.effective1{

margin-top: -0.1rem !important;

margin-left: 0.56rem;

z-index: 0 !important;

}

.effective1 .bing{

background-color: #866af3 !important;

border-color: #866af3 !important;

}

.effective2{

margin-top: 0.18rem !important;

margin-left: 0.2rem;

}

.effective2 .bing{

background-color: #3ccda3 !important;

border-color: #3ccda3 !important;

}

.effective3{

margin-top: 1.4em !important;

margin-left: 0em;

}

.effective3 .bing{

background-color: #fa9241 !important;

border-color: #fa9241 !important;

}

.effective4{

margin-top: 0.55em !important;

margin-left: -0.7em;

}

.effective4 .bing{

background-color: #f680a4 !important;

border-color: #f680a4 !important;

}

.effective5{

margin-top: -0.1rem !important;

margin-left: -0.13rem;

}

.effective5 .bing{

background-color: #1f9cf5 !important;

border-color: #1f9cf5 !important;

}

.bing {

position:absolute;

width:12.5em;

height:12.5em;

clip:rect(0px,6.25em,12.5em,0px);

-moz-border-radius:6.25em;

-webkit-border-radius:6.25em;

border-radius:6.25em;

}

.bing span{

position: absolute;

transform: rotate(-30deg);

top: 1.7em;

left: 2.4em;

display: block;

color:#ffffff;

}

.inner{

position: absolute;

top: 6%;

width: 50%;

height: 50%;

background-color: #579edf;

border-radius: 50%;

left: 0;

right: 0;

bottom: 0;

margin: auto;

color:#ffffff;

text-align: center;

z-index:15;

}

.inner span{

font-size:1.5em;

width: 50%;

}

.inner span:first-child{

margin-top: 0.8em;

display: inline-block;

}

.inner span:last-child{

font-size: 0.35rem;

}

.active{

width: 52%;

height:52%;

background-color: #127ce0;

border:2px solid #328de4;

box-shadow: 0.07rem 0.05rem 0.07rem #333;

}