如何在雷达图中的多边形内添加文本

Question

我有一个显示动画多边形的雷达图，不同的多边形显示不同的颜色，我可以在每个多边形内添加图像吗？我也想在三行的中心和端点的末尾添加文本线

我的代码在下面

@import url(https://fonts.googleapis.com/css?family=Raleway);
.categories,
li {
    font-family: Raleway, sans-serif;
    background-color: #282155;
    border-radius: 300px
}
.in,
.out,
li {
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
}
body,
html {
    background: #1D1645;
    height: 100%
}
.in {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/522641/jnehXBI.png)
}
.thewholething {
    width: 550px;
    height: 100%;
    margin: 0 auto
}
.categories {
    font-size: 22pt;
    color: #8D8AD9;
    padding: 5px 10px
}
.labelcontainer {
    margin-top: 30px;
    left: 30%;
    width: 200px;
    float: left
}
li {
    font-size: 18pt;
    padding: 2px 10px 5px;
    margin: 3px
}
.label1 {
    color: red
}
.label2 {
    color: #0ff
}
.label3 {
    color: #ff0
}
.label4 {
    color: #c9c
}
li span {
    color: #8D8AD9;
    font-size: 12pt
}
.graph-bg {
    width: 300px;
    height: 300px;
    float: right;
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/522641/jnehXBI.png)
}
.graphcontainer {
    top: 16.5%;
    left: 2.5%;
    margin: auto;
    position: relative;
    width: 200px;
    height: 200px
}
.statform {
    margin: 0 auto;
    width: 180px;
    height: 180px;
    position: absolute
}
.in {
    clip-path: polygon(50% 5%, 3% 98%, 96% 97%);
    background-color: #25486b;
    background-position: 48% 42%;
    animation-name: in-anim
}
.out {
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    background-color: rgba(80, 220, 220, .4);
    animation-name: out-anim
}
li.label1 {
    animation-name: label1-anim
}
li.label2 {
    animation-name: label2-anim
}
li.label3 {
    animation-name: label3-anim
}
li.label4 {
    animation-name: label4-anim
}
@keyframes in-anim {
    0%, 100%, 8% {
        background-color: #561034;
        clip-path: polygon(50% 66%, 28% 84%, 95% 98%)
        
    }
    25% {
        background-color: #25486b;
        clip-path: polygon(50% 7%, 5% 97%, 66% 82%)
    }
    50% {
        background-color: #565034;
        clip-path: polygon(50% 50%, 5% 97%, 95% 98%)
    }
    90% {
        background-color: #3F3971;
        clip-path: polygon(50% 7%, 28% 84%, 95% 97%)
    }
}
@keyframes out-anim {
    0%, 100%, 8% {
        background-color: red;
        clip-path: polygon(50% 61%, 23% 86%, 100% 100%)
    }
    25% {
        background-color: #0ff;
        clip-path: polygon(51% 1%, 0 100%, 69% 84%)
    }
    50% {
        background-color: #ff0;
        clip-path: polygon(50% 45%, 0 100%, 100% 100%)
    }
    90% {
        background-color: #8D8AD9;
        clip-path: polygon(50% 0, 23% 86%, 100% 100%)
    }
}
@keyframes label1-anim {
    0%, 10%, 100% {
        background-color: #DD2941
    }
    20%,
    90% {
        background-color: #282155
    }
}
@keyframes label2-anim {
    0%, 10%, 100%, 40% {
        background-color: #282155
    }
    30% {
        background-color: #0CBCCC
    }
}
@keyframes label3-anim {
    30%, 65% {
        background-color: #282155
    }
    50% {
        background-color: #C9C815
    }
}
@keyframes label4-anim {
    55%, 90% {
        background-color: #282155
    }
    65%,
    85% {
        background-color: #c9c
    }
}

<div class="thewholething">
  <div class="labelcontainer">
    <span class="categories">CATEGORIES</span>
  <ul>
    <li class="label1"><span>Fashion</span></li>
    <li class="label2"><span>Off-Road</span></li>
    <li class="label3"><span>Art & Tech</span></li>
    <li class="label4"><span>Entertainment</span></li>
    </ul>
  </div>
  <div class="graph-bg">
    <div class="graphcontainer">
      <div class="statform out">
      </div>
      <div class="statform in">
      </div>
    </div>
  </div>
  <div>

Web开发的新手，只是想以此为乐。谁能帮我