.circle {
width: 150px;
height: 150px;
background: white;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 75px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 3px 1px 3px #909090;
border: solid 1px #909090;
position: relative;
}
.arrow {
width: 125px;
height: 0;
border-left: 125px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
position: absolute;
left: 21px;
}
.arrow:after {
content: '';
border-left: 36px solid white;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
position: absolute;
top: -50px;
left: -125px;
}
用笨办法实现了, 自问自答吧....