Round divs inside a parent round div

Question

I would like to ask if it is possible to inserts rounded corner divs into a round div. They should be inserted in a circular way, one after another. I want to create a ring of circular divs, without changing the size of the parent div. Please if you know how to do it, I will really much appreciate.

I want a big circle, and many others to create a ring inside that one. The small divs should just stay in the border of the big one. Or I want to create a ring made with many circular divs. — , Nov 12 '15 at 17:54

score 3 · Answer 1 · answered Nov 12 '15 at 18:02

You can define the outer element as position: relative, and inner elements with absolute. The margin will do the job to make distance between each other.

.circle{
  width:256px;
  height:256px;
  border-radius:50%;
  background: rgba(255, 99, 71, 0.5);
  border:3px solid white;
  position:relative;
}

.circle >  .circle{
  width:initial;
  height:initial;
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  margin:20px;
}

<div class="circle">

  <div class="circle">
  
    <div class="circle">
  
    </div>
    
  </div>
  
</div>

If anyone is wondering how to make it work under Internet Explorer, this was my answer: https://stackoverflow.com/questions/20823105/use-initial-width-for-element-not-working-in-ie — David, Oct 19 '17 at 19:42

score 1 · Accepted Answer · answered Nov 12 '15 at 17:59

1

<div id="one">
<div id="two"></div></div><style type="text/css">
#one{
    height: 120px;
    width: 120px;
    background: #333;
    border-radius: 60px;
}
#two{
    height: 60px;
    width: 60px;
    background-color: white;
    border-radius: 30px;
    position: absolute;
    top: 35px;
    left: 35px;
}

This will work for you. Make adjustments as your wish.

answered Nov 12 '15 at 17:59

taruntejae

410
4
14

1

Thanks. Now I can create many divs inside the parent one and create a circular ring with them just by changing the css: top: px; left: px; right: px; etc Hero :) – Nov 12 '15 at 18:05
2

Have you noticed that your implementation is croked? – Túlio Castro Nov 12 '15 at 18:08
1

Hey geek, this is not our homework... Look it as a template. :p – taruntejae Nov 12 '15 at 18:12

score 0 · Answer 3 · answered Nov 12 '15 at 17:55

If you are happy to work with fixed widths and heights it's easy enough.

<!DOCTYPE html>
<html>

<body>
    <div style="padding: 4px; width: 32px; height: 32px; border-radius: 20px; background-color: red;">
        <div style="padding: 4px; width: 24px; height: 24px; border-radius: 16px; background-color: orange;">
            <div style="padding: 4px; width: 16px; height: 16px; border-radius: 12px; background-color: yellow;">
                <div style="padding: 4px; width: 8px; height: 8px; border-radius: 8px; background-color: green;">
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Give them a padding of whatever ring thickness you want, and then each ring needs to be (padding x 2) smaller than its parent, in both width and height. Each div's border-radius needs to be half of its outer width (where outer width = width + (padding x 2)).

Example: http://doug.exploittheweb.com/SO/33677891.html

The code above creates rounded divs inside a div. I want rounded div to create a circle, like a Ring — , Nov 12 '15 at 17:59

score 0 · Answer 4 · answered Nov 12 '15 at 18:06

First way using relative absolute divs https://jsfiddle.net/2Lzo9vfc/67/

HTML

<div class="big-circle">
    <div class="small-circle">
        <div class="extra-small-circle">

        </div>
    </div>
</div>

CSS

.big-circle {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: black;
}

.small-circle {
    background: red;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50px, -50px);
}

.extra-small-circle {
    background: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-25px, -25px);
}

Second way using gradiant https://jsfiddle.net/2Lzo9vfc/69/

HTML

<div class="circle"></div>

CSS

.circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #ffffff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 17%, #ff0a0a 19%, #ff2828 40%, #000000 41%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

Round divs inside a parent round div

4 Answers4