实现轮盘转盘就是画圆和扇形，实现圆和扇形有两种方式

css实现
svg实现

下面我所说的就是svg的形式

首先要知道svg的 A 指令：

参数	描述
rx	椭圆长轴半径
ry	椭圆短轴半径
xa	椭圆与x轴的夹角
lf	所取的弧大小，1取大弧，0取小弧
sf	绘制弧线的方向，1顺时针绘制，0逆时针绘制
ex	结束点的x坐标
ey	结束点的y坐标

然后是计算坐标。我这个圆是等分8个扇形。所以每个扇形是360/8=45度
我们需要计算这几个数:cos45和sin45的数值
拿第一个扇形路径来举例

<circle
        cx="50"
        cy="50"
        r="48"
        stroke="#02effb"
        fill="transparent"
        stroke-width="2"
      ></circle>
 <path
        d="M 50 50  L 50 3 A 45 45, 0,0,1,85.89 20.16 Z"
        stroke="#085b8b"
        stroke-width="1"
        class="ctl-svg"
      ></path>

circle中， cx="50"cy="50" 原点50 50 以半径 r="48" 画圆
M 50 50:从 x:50，y:50坐标开始
L 50 3 :画一条直线到终点坐标x 50 y 3
A 45 45, 0,0,1,85.89 20.16：椭圆长短轴 50 50 x轴夹脚0，0小弧(凸扇形)，1顺时针，结束点坐标x x 85.89 y 20.16
Z 直线回到原点封闭
重点就是结束点坐标的计算，圆的半径是48，原点坐标是50 50，a=48cos45，b=48sin45, x=50-a，y=50-b，算出来大概的数。然后大概调整下

<div class="ball">
    <svg
      
      width="15"
      height="15"
      id="svg1"
      style="
        position: absolute;
        top: 10%;
        left: 41%;

        width: 16%;
        transform: rotate(150deg);
      "
    >
<!-- 白色箭头-->
      <path
        d="M 0 15  L 0 0  A 15 15, 0,0,0,13 7.5 Z"
        stroke-width="1"
        class="ctl-ac"
      ></path></svg
    ><svg
      width="15"
      height="15"
      id="svg3"
      style="
        position: absolute;
        top: 37%;
        left: 76%;
        width: 16%;
        transform: rotate(240deg);
      "
    >
      <path
        d="M 0 15  L 0 0  A 15 15, 0,0,0,13 7.5 Z"
        stroke-width="1"
        class="ctl-ac"
      ></path></svg
    ><svg
      width="15"
      height="15"
      id="svg5"
      style="
        position: absolute;
        top: 73%;
        left: 44%;
        width: 16%;
        transform: rotate(330deg);
      "
    >
      <path
        d="M 0 15  L 0 0  A 15 15, 0,0,0,13 7.5 Z"
        stroke-width="1"
        class="ctl-ac"
      ></path></svg
    ><svg
      width="15"
      height="15"
      id="svg7"
      style="
        position: absolute;
        top: 46%;
        left: 8%;
        width: 16%;
        transform: rotate(60deg);
      "
    >
      <path
        d="M 0 15  L 0 0  A 15 15, 0,0,0,13 7.5 Z"
        stroke-width="1"
        class="ctl-ac"
      ></path></svg
    ><svg
      width="10"
      height="10"
      id="svg2"
      style="
        position: absolute;
        top: 19%;
        left: 65%;
        width: 16%;
        transform: rotate(195deg);
      "
    >
      <path
        d="M 0 10  L 0 0  A 15 15, 0,0,0,8.66 5 Z"
        stroke-width="1"
        class="ctl-ac"
      ></path></svg
    ><svg
      width="10"
      height="10"
      id="svg4"
      style="
        position: absolute;
        top: 63%;
        left: 69%;
        width: 16%;
        transform: rotate(285deg);
      "
    >
      <path
        d="M 0 10  L 0 0  A 15 15, 0,0,0,8.66 5 Z"
        stroke-width="1"
        class="ctl-ac"
      ></path></svg
    ><svg
      width="10"
      height="10"
      id="svg6"
      style="
        position: absolute;
        top: 70%;
        left: 22%;
        width: 16%;
        transform: rotate(15deg);
      "
    >
      <path
        d="M 0 10  L 0 0  A 15 15, 0,0,0,8.66 5 Z"
        stroke-width="1"
        class="ctl-ac"
      ></path></svg
    ><svg
      width="10"
      height="10"
      id="svg8"
      style="
        position: absolute;
        top: 24%;
        left: 14%;
        width: 16%;
        transform: rotate(105deg);
      "
    >
      <path
        d="M 0 10  L 0 0  A 15 15, 0,0,0,8.66 5 Z"
        stroke-width="1"
        class="ctl-ac"
      ></path></svg
    ><svg width="100" height="100" transform="rotate(-22)">

<!-- 圆和扇形-->
      <circle
        cx="50"
        cy="50"
        r="48"
        stroke="#02effb"
        fill="transparent"
        stroke-width="2"
      ></circle>
      <path
        d="M 50 50  L 50 3 A 45 45, 0,0,1,85.89 20.16 Z"
        stroke="#085b8b"
        stroke-width="1"
        class="ctl-svg"
      ></path>
      <path
        d="M 50 50  L  85.89 20.16 A 45 45, 0,0,1,96.5 50 Z"
        stroke="#085b8b"
        stroke-width="1"
        class="ctl-svg"
        
      ></path>
      <path
        d="M 50 50  L  96.5 50 A 45 45, 0,0,1,85.89 79.84 Z"
        stroke="#085b8b"
        stroke-width="1"
        class="ctl-svg"
        
      ></path>
      <path
        d="M 50 50  L  85.89 79.84 A 45 45, 0,0,1,50 97 Z"
        stroke="#085b8b"
        stroke-width="1"
        class="ctl-svg"
        
      ></path>
      <path
        d="M 50 50  L  50 97 A 45 45, 0,0,1,14.11 79.84 Z"
        stroke="#085b8b"
        stroke-width="1"
        class="ctl-svg"
        
      ></path>
      <path
        d="M 50 50  L  14.11 79.84 A 45 45, 0,0,1,3 50 Z"
        stroke="#085b8b"
        stroke-width="1"
        class="ctl-svg"
        
      ></path>
      <path
        d="M 50 50  L  3 50 A 45 45, 0,0,1,14.11 20.16 Z"
        stroke="#085b8b"
        stroke-width="1"
        class="ctl-svg"
        
      ></path>
      <path
        d="M 50 50  L  14.11 20.16 A 45 45, 0,0,1,50 3 Z"
        stroke="#085b8b"
        stroke-width="1"
        class="ctl-svg"
        
      ></path>
    </svg>
  </div>
<style>
.ball {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;

margin-top: 7%;
margin-left: 5%;
}
.ctl-svg {
fill: #0a6d98;
fill-opacity: 0.3;
}
.ctl-svg:hover {
fill: #0a6d98;
fill-opacity: 0.8;
}
.ctl-ac {
fill: #red;
}
</style>

最终效果：