<div class="radar-chart">
    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 200">
        <g stroke="#dce5eb">
            <path d="M 100 100 L 100.0 0.0"/>
            <path d="M 100 100 L 195.1 69.1"/>
            <path d="M 100 100 L 158.8 180.9"/>
            <path d="M 100 100 L 41.2 180.9"/>
            <path d="M 100 100 L 4.9 69.1"/>
        </g>
        <g stroke="#dce5eb" fill="none">
            <path d="M 100.0 0.0 L 195.1 69.1 L 158.8 180.9 L 41.2 180.9 L 4.9 69.1 L 100.0 0.0"/>
            <path d="M 100.0 20.0 L 176.1 75.3 L 147.0 164.7 L 53.0 164.7 L 23.9 75.3 L 100.0 20.0"/>
            <path d="M 100.0 40.0 L 157.1 81.5 L 135.3 148.5 L 64.7 148.5 L 42.9 81.5 L 100.0 40.0"/>
            <path d="M 100.0 60.0 L 138.0 87.6 L 123.5 132.4 L 76.5 132.4 L 62.0 87.6 L 100.0 60.0"/>
            <path d="M 100.0 80.0 L 119.0 93.8 L 111.8 116.2 L 88.2 116.2 L 81.0 93.8 L 100.0 80.0"/>
        </g>
        <path d="M 100.0 40.0 L 166.6 78.4 L 147.0 164.7 L 47.1 172.8 L 4.9 69.1 L 100.0 40.0" fill="#181b2930" stroke="#181b29"/>
        <g fill="#181b29">
            <circle cx="100.0" cy="40.0" r="3"/>
            <circle cx="166.6" cy="78.4" r="3"/>
            <circle cx="147.0" cy="164.7" r="3"/>
            <circle cx="47.1" cy="172.8" r="3"/>
            <circle cx="4.9" cy="69.1" r="3"/>
        </g>
    </svg>
    <dl>
        <div>
            <dt>項目1</dt>
            <dd>6.0</dd>
        </div>
        <div>
            <dt>項目2</dt>
            <dd>7.0</dd>
        </div>
        <div>
            <dt>項目3</dt>
            <dd>8.0</dd>
        </div>
        <div>
            <dt>項目4</dt>
            <dd>9.0</dd>
        </div>
        <div>
            <dt>項目5</dt>
            <dd>10.0</dd>
        </div>
    </dl>
</div>

.radar-chart {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 230px;
  height: 230px;
  margin: 0 auto;
  padding: 35px;
  box-sizing: content-box;
}

.radar-chart svg {
  width: 100%;
  height: 100%;
}

.radar-chart dl {
  position: absolute;
  width: 100%;
  height: 100%;
}

.radar-chart dl > div {
  position: absolute;
  color: #777;
  font-size: 0.6em;
  text-align: center;
}

.radar-chart dl > div:nth-child(1) {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.radar-chart dl > div:nth-child(2) {
  top: 31%;
  right: 7%;
  transform: translateX(50%);
}

.radar-chart dl > div:nth-child(3) {
  bottom: 6%;
  right: 25%;
  transform: translateX(50%);
}

.radar-chart dl > div:nth-child(4) {
  bottom: 6%;
  left: 25%;
  transform: translateX(-50%);
}

.radar-chart dl > div:nth-child(5) {
  top: 31%;
  left: 7%;
  transform: translateX(-50%);
}

.radar-chart dd {
  margin: 0;
}