vue或者uniapp如何实现多个div环形布局

Question

问题遇到的现象和发生背景

操作环境、软件版本等信息

尝试过的解决方法

我想要达到的结果

Answer 1

找到一个中心点进行旋转，canvas也可以，比较麻烦。ui切图最简单。跑一下看看，具体的自己设置旋转角度。有更好的建议欢迎随时点评！有帮助别忘了关注点采纳~~蟹蟹

  <div class="circle-box">
            <div class="circle1">
                <div class="cc"></div>
            </div>
            <div class="circle1 circle2">
                <div class="cc1"></div>
            </div>
            <div class="circle1 circle3">
                <div class="cc"></div>
            </div>
            <div class="circle1 circle4">
                <div class="cc"></div>
            </div>
            <div class="circle1 circle5">
                <div class="cc"></div>
            </div>
        </div>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .circle-box {
        width: 100px;
        height: 100px;
        border-radius: 100%;
        border: 1px dashed rgb(67, 113, 206);
        position: relative;
        /* box-sizing: border-box; */
        box-sizing: content-box;
        margin: 50px;

    }

    .circle1 {
        width: 0px;
        height: 0px;
        border-radius: 100%;
        /* border: 1px dashed rgb(67, 113, 206); */
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 50%;
        transform: translateY(-50%);
        transform: rotate(0deg);
    }

    .circle2 {
        transform: rotate(45deg);
    }

    .circle3 {
        transform: rotate(90deg);
    }

    .circle4 {
        transform: rotate(145deg);
    }

    .circle5 {
        transform: rotate(190deg);
    }

    .cc {
        margin-top: 45px;
        width: 10px;
        height: 10px;
        border-radius: 100%;
        border: 1px dashed rgb(230, 25, 25);
    }
</style>