Question

我正在设计以下三个圆形div并且我想根据项目值动态地在div的圆形路径中放置一个项目。

有没有更好的方法来实现这个？我想动态地将项目放在div的圆形路径中。

在下面的代码中，我想将div放在循环路径中，该路径具有类＆＃34; placeit＆＃34;

找到下面的代码。 https://codepen.io/najurudeen/full/JJQyzL

＆＃13;

    .container{
         width: 700px;
        text-align: center;
        justify-content: center;
        align-items: center;
        display: flex;
        background: #282e3d;
        height: 600px; 
      
    }
      .one{
        height: 170px;
        background: #2196F3;
        width: 170px;
        border-radius: 100%;
        position: absolute;
        z-index: 4000;
        background: radial-gradient(#86c56f, #30bf9a);
      
    }
    
    .two{
         height: 240px;
        background: #9E9E9E;
        width: 240px;
        border-radius: 100%;
        position: absolute;
        
        //opacity: 0.4;
        background: radial-gradient(rgba(32,135,153,0.4),rgba(36,133,153,0.5));
      
    }
    
    .three{
      height: 300px;
        background: #E91E63;
        width: 300px;
        border-radius: 100%;
        /* position: absolute; */
        background: radial-gradient(rgba(40,67,90,0.4),rgba(41,67,88,0.5));
      
    }
    
    .placeit{
      position:absolute;
      left:90%;
      top:20%;
    }

＆＃13;

    <div class="container">
    <div class="one"></div>
    <div class="two">
       <div class="placeit">item1 60%</div>
       <div></div>
       <div></div>
    </div>
    <div class="three">
      <div class="placeit">item2 70%</div></div>
    </div>

＆＃13;

Answer 1

你的问题很模糊......当你动态地说我希望你在谈论你的代码中有一些脚本时...如果是这样那么你的脚本在哪里以及你的价值来自哪里......你没有定义任何东西......如果你只是想创建一个循环图，那么这可能会有所帮助：

<div class="container">
        <div class="one"><p class="center">Item0 75%</p></div>
        <div class="two">
            <p>item1 60%</p>

        </div>
        <div class="three">
            <p>item2 70%</p>
        </div>
    </div>

并将其添加到css：

p {
    margin-top: 10px;
}
.center {
    margin-top: 0;
    line-height: 170px;
}

动态地将元素放在圆形路径中

1 个答案: