Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Backgrounds and Borders Border Radius

Elena Paraschiv
Elena Paraschiv
9,938 Points
Posted by Elena Paraschiv
Elena Paraschiv
9,938 Points

make more circles inside a bigger circle

Dear all,

Now it looks like this eggs And I would like to repeat the white circles inside the red shapes. Do you guys have any idea?

.egg{
    display:inline-block;
    width:200px;
    height:200px;
    background:#ff8080;
    border-radius:100% 50%;
    margin: 10px 40px;
    position:relative;
}

.egg::after{

    width:20px;
    height:20px;
    position:absolute;
    content:"";
    background:#fff;
    top:50px;
    left:50px;
    border-radius:100%;

}

<div class="egg"></div>
<div class="egg"></div>
<div class="egg"></div>
<div class="egg"></div>

2 Answers

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

You could get a second one using ::before, like this:

.egg::before{
    width: 20px;
    height: 20px;
    position: absolute;
    content: "";
    background: #fff;
    top: 130px;
    left: 130px;
    border-radius: 50%;
}

But if you want more than two, I think you'd need to add additional elements inside the egg DIV's. Using the same concept, each additional element could potentially add 3 more shapes.

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

Happy to help, Elena. I had some more time today so just for fun, I tried my own suggestion (and I condensed the CSS a bit):

code.html 
<div class="egg"><div class="dot"></div></div>
<div class="egg"><div class="dot"></div></div>
<div class="egg"><div class="dot"></div></div>
<div class="egg"><div class="dot"></div></div>
styles.css 
.egg {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: #ff8080;
  border-radius: 100% 50%;
  margin: 10px 40px;
  position: relative;
}
.egg::before { top: 130px; left: 130px; }
.egg::after  { top:  50px; left:  50px; }

.egg::before, .egg::after,
.dot::before, .dot::after {
  width: 20px;
  height: 20px;
  position: absolute;
  content: "";
  background: #fff;
  border-radius: 50%;
}

.dot {
  width: 20px;
  height: 20px;
  position: relative;
  top: 90px;
  left: 90px;
  background: #fff;
  border-radius: 50%;
}
.dot::before { top: -50px; left:  50px; }
.dot::after  { top:  50px; left: -50px; }

/* just for fun, color the eggs differently */
.egg:nth-child(2) { background: #fb6; }
.egg:nth-child(3) { background: #6d6; }
.egg:nth-child(4) { background: #6af; }

Happy coding!

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

thanks Steve! That looks fun and its good practice of the selectors