Circle Inside circle

by aanita0309

HTML

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

CSS

.cirInside4Cir{
  width:300px;
  height:300px;
  border-radius:100%;
  background:green;
}

.cirInside4Cir:before{
  width:15%;
  height:30%;
  border-radius:100%;
  background:yellow;
  position:absolute;
  top:20%;
  left:5%;
  content:'';
  
}

.cirInside4Cir:after{
  width:15%;
  height:30%;
  border-radius:100%;
  background:red;
  position:absolute;
  top:20%;
  left:25%;
  content:'';
}

#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;
}