How to add small circle into big circle in css3?

Question

Here is my code for small circle:

<div id="circle"></div>

#circle { 
   width: 40px;
   height: 40px;
   background: green; 
   -moz-border-radius: 20px; 
   -webkit-border-radius: 20px; 
   border-radius: 20px;
}

Here is jsfiddle link for big circle: http://jsfiddle.net/x1n15791/14/

I need to fit small circle into my big circle at center position.

And after fitting, i need some space between small and big circles.

May i know, how to do that?

Any help would be highly appreciated. Thanks in advance.

Like [this](http://stackoverflow.com/questions/28646858/concentric-circles-with-css)? — Harry, Feb 25 '15 at 10:32
yes @harry. .. but my big circle should have four division,, may i know,, how can i seperated? — rish, Feb 25 '15 at 10:36
http://jsfiddle.net/ivangrs/x74ce00k/ version using pseudo-elements — Ivan Gerasimenko, Feb 25 '15 at 10:36
Oh I see @rish. Will vote to re-open then. Do you have an image or something of the shape you wish to achieve? — Harry, Feb 25 '15 at 10:47
@rish I will vote to reopen too but please edit your question with all your requirements (number of divisions, space...). Also, if you had an image/mokup of the desired layout, it would help to understand what you are trying to achieve. — web-tiki, Feb 25 '15 at 10:50
@harry: in my big circle have four part like this http://jsfiddle.net/x1n15791/14/ .. and i need to fit small circle at center position of big circle. thanks.. and i need some space between them. — rish, Feb 25 '15 at 10:56
@rish the question is getting very unclear. Please make sure you give all the requirements in the first place. As you can see the answers were made according to the requirements you specified at the biginning. Now that you changed them, they aren't right anymore. This can be very annoying for people who are spending time and effort to help you. — web-tiki, Feb 25 '15 at 11:05
@web-tiki: here is my final jsfiddle link: http://jsfiddle.net/x1n15791/18/ . so may i know, how to fit that small circle in center? — rish, Feb 25 '15 at 11:09

Harry · Accepted Answer · 2015-02-25T13:18:59.450

4

The effect of having an inner circle surrounded by an outer circle (which has four sectors) with some space between the inner and outer circle can be achieved using the below mentioned method.

Basically, I have retained the border colors that you had for each border and then added a height and width to the circle element. This makes the element leave a circular area in the middle inside the separated borders. Within the inner circular area another circle is added using the inset box-shadow technique mentioned in both the post that I linked earlier.

#circle {
  width: 40px;
  height: 40px;
  border-bottom: 40px solid black;
  border-top: 40px solid black;
  border-left: 40px solid green;
  border-right: 40px solid red;
  border-radius: 50%;
  background: blue;
  box-shadow: inset 0px 0px 0px 10px white;
}

<div id="circle"></div>

Note for Future readers: This may not be the best depending on your needs because the inner circle is produced using box-shadow. So for instance, if you want an image inside it then this approach would not work.

Similarly if you want the four separated areas on around the circle to be clickable with different actions then also this approach will not work.

edited Feb 25 '15 at 13:18

answered Feb 25 '15 at 11:09

Harry

87,580
25
202
214

so how to do, the four separated areas on around the circle to be clickable with different actions? further i need this one. @harry: can you please help me? thanks – rish Feb 25 '15 at 11:26
For that you need different elements @rish – The Pragmatick Feb 25 '15 at 11:27
That is not bother me @harry: can you please show any sample ? – rish Feb 25 '15 at 11:29
@rish: I would recommend you to have a look at both chipChocolate.py's answer and ThePragmatick's answer in [this thread](http://stackoverflow.com/questions/27943053/how-to-create-a-circle-with-links-on-border-side/27944020#27944020). Your needs seem to be almost same. – Harry Feb 25 '15 at 11:32
@Harry: can you please see this link http://stackoverflow.com/questions/28718697/how-to-change-the-size-of-circle-in-svg – rish Feb 25 '15 at 12:24

Ismael Miguel · Answer 2 · 2015-02-25T11:30:41.233

Here is a 100% pure css example:

This works perfectly:

#circle, #circle:before, #circle:after {
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 display: block;
}

#circle:before, #circle:after {
 position: relative;
 content: '';
}

#circle { 
 width: 100px;
 height: 100px;
 background: white;
 border: 20px solid blue;
}

#circle:before {
 width: 50%;
 height: 50%;
 top: 25%;
 left: 25%;
 background: red;
}

#circle:after {
 width: 20%;
 height: 20%;
 top: -10%;
 left: 40%;
 background: green;
}

<div id="circle"></div>

This works even with IE8!

If you need to set a different size, change the width and height of the #circle.

You can set more by playing with borders on the :before and :after pseudo-elements.

Also notice that this will work in browsers who don't support border-radius, but will display as a square.

The central dot may need some adjustments.

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

1

.circle { 
   width: 100%;
   height: 100%;

   -moz-border-radius: 50%; 
   -webkit-border-radius: 50%; 
   border-radius: 50%;

  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box;   
  box-sizing: border-box;       
}

.circle.one{
  width:400px;
  height:400px;
  background:#440000;
  padding:40px;
}

.circle.two{
  background:#662222;
    padding:80px;
}
.circle.three{
  background:#884444;
    padding:20px;
}
.circle.four{
  background:#ff8888;
}

<div class="circle one">  
    <div class="circle two">
      <div class="circle three">
        <div class="circle four">
        </div> 
      </div> 
    </div>  
</div>

screen shot

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 25 '15 at 10:38

johanthuresson

580
3
5

i need some space between these circles.. and i need four division like my posted jsfiddle. – rish Feb 25 '15 at 10:40
1

@rish, please edit your question and post an image of what should be the expected result – Fabrizio Calderan Feb 25 '15 at 10:53

score 1 · Answer 4 · answered Feb 25 '15 at 10:55

Here is a full CSS solution, which requires no extra markup:

#circle { 
  position: relative;
  width: 400px;
  height: 400px;
  background: green; 
}
#circle,
#circle:before,
#circle:after {
  -moz-border-radius: 100%; 
  -webkit-border-radius: 100%; 
  border-radius: 100%;
}
#circle:before,
#circle:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform-origin: center center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#circle:before {
  width: 60%;
  height: 60%;
  background: white; 
}
#circle:after {
  width: 50%;
  height: 50%;
  background: yellow; 
}

<div id="circle"></div>

score 1 · Answer 5 · answered Feb 25 '15 at 11:00

Just with CSS you can achieve it easily :

#circle { 


 width: 400px;
   height: 400px;
   background: green; 
   -moz-border-radius: 200px; 
   -webkit-border-radius: 200px; 
   border-radius: 200px;
    position: relative;
}
#circle:before{
    display: block;
    content: '';
    width: 100px;
    height: 100px;
    background: white; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    border-radius: 50px;    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

http://jsfiddle.net/x1n15791/17/

score 1 · Answer 6 · answered Sep 08 '16 at 13:28

Here is a simple and pure CSS solution that uses the border and box-shadow properties

.circle
{
  height:70px;
  width:70px;
  background-color:red;
  border:24px solid white;
  box-shadow: 0px 0px 0px 24px blue;
  border-radius:50%;
}

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

m0bi5 · Answer 7 · 2015-02-25T11:49:35.403

0

Here is a pure CSS solution:

HTML:

<div id="container">
  <div id="circle">
      <div id="small-circle">
      </div>
  </div>
</div>

CSS:

#container {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

#circle {
  position: absolute;
  width: 50%;
  height: 50%;
  background-color:green;
  border-radius: 50%;
}

#small-circle{
  margin-top: 25%;
  margin-left: 24%;
  position: absolute;
  width: 45%;
  height: 45%;
  background-color: #4d4d4d;
  border-radius: 50%;   
  border:10px solid black;
}

Demo:http://jsfiddle.net/RV5b4/228/

edited Feb 25 '15 at 11:49

answered Feb 25 '15 at 10:36

m0bi5

8,900
7
33
44

1

It's not a full CSS solution, it requires extra markup. – zessx Feb 25 '15 at 10:52

score 0 · Answer 8 · answered Feb 25 '15 at 11:22

0

Is this what you are looking for:

#circle:after;

http://jsfiddle.net/johanthuresson/x1n15791/23/

answered Feb 25 '15 at 11:22

johanthuresson

580
3
5

How to add small circle into big circle in css3?

8 Answers8