css3 实现扇形组圆

1,254 阅读1分钟

WX20180514-181308@2x.png

   let w = Math.tan(Math.PI/len)*width/2+"px";
       //得到邻边长度,border-top-width为半径,用邻边设置透明生成三角形
       return startList.map((el,ind)=>{
            
           return <li className={"li"+(ind%2==0? "1":"2")} style={{transform:`rotate(${ind*r}turn)`}} key={ind}>
                        <img src="" width="20" height="20" />
                        <p className="bg" style={{borderLeftWidth:w,borderRightWidth:w}} ></p>
                        <p>{el.Name}</p>
                    </li>
       })