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.
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments