css3 实现扇形组圆

最新推荐文章于 2024-03-27 21:00:11 发布

weixin_33953249

最新推荐文章于 2024-03-27 21:00:11 发布

阅读量985

点赞数

文章标签：前端 ViewUI

原文链接：https://juejin.im/post/5be93dc2e51d4521db497ced

版权

   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>
       })
复制代码