Adjacent circles with HTML and CSS
4 answers
You can try this:
JSFIDDLE DEMO (added some circles to make it more interesting)
CSS
#container {
position: relative;
width: 100%;
padding-bottom: 100%;
}
#circle {
position: absolute;
width: 50%;
height: 50%;
background-color: #000000;
border-radius: 50%;
}
#small-circle{
margin-top: 25%;
margin-left: 45.5%;
position: absolute;
width: 40%;
height: 40%;
background-color: #e5e5e5;
border-radius: 50%;
}#smallest-circle{
margin-top: 55%;
margin-left: 78%;
position: absolute;
width: 20%;
height: 20%;
background-color: #f00;
border-radius: 50%;
}
Html
<div id="container">
<div id="circle">
</div>
<div id="small-circle">
</div>
<div id="smallest-circle">
</div>
</div>
+4
source to share
Sure! Create multiple divs, each with position:absolute
both a width and a height of 0. Then apply a border and border radius to each one and position them by trial and error.
Html
<div class="circle c1"> </div>
<div class="circle c2"> </div>
<div class="circle c3"> </div>
<div class="circle c4"> </div>
CSS
.circle {
position:absolute;
width:0;
height:0;
}
.c1 {
left:100px;
top:100px;
border:50px solid red;
border-radius:50px;
}
.c2 {
left:118px;
top:185px;
border:100px solid blue;
border-radius:100px;
}
.c3 {
left:300px;
top:70px;
border:125px solid green;
border-radius:125px;
}
.c4 {
left:295px;
top:310px;
border:65px solid yellow;
border-radius:65px;
}
+2
source to share
I would recommend the tag <canvas>
implemented in HTML5. It takes a little Javascript to draw circles, but gives you a lot of energy. Here's a basic layout for your sample image:
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="1000" height="1000"> <!--style="border:1px solid #000000;"-->
</canvas>
<script>
/* Identify the Canvas object */
var c = document.getElementById("myCanvas");
/*Built-in HTML5 object that allows for drawing*/
var c1y = c.getContext("2d");
/* Set your fill and stroke color */
c1y.fillStyle = "#FFFF00";
c1y.strokeStyle = "#FFFF00";
/*Draw the circle.
Arc property: arc(x,y,r,start,stop) */
c1y.beginPath();
c1y.arc(100,80,80,0,2*Math.PI);
/* Applies the stroke and fill to the drawn circle */
c1y.stroke();
c1y.fill();
var c2o = c.getContext("2d");
c2o.fillStyle = "#FF6600";
c2o.strokeStyle = "#FF6600";
c2o.beginPath();
c2o.arc(220,40,40,0,2*Math.PI);
c2o.stroke();
c2o.fill();
var c3p = c.getContext("2d");
c3p.fillStyle = "#6600FF";
c3p.strokeStyle = "#6600FF";
c3p.beginPath();
c3p.arc(320,60,60,0,2*Math.PI);
c3p.stroke();
c3p.fill();
var c4g = c.getContext("2d");
c4g.fillStyle = "#66FF99";
c4g.strokeStyle = "#66FF99";
c4g.beginPath();
c4g.arc(450,120,80,0,2*Math.PI);
c4g.stroke();
c4g.fill();
var c5b = c.getContext("2d");
c5b.fillStyle = "#3399FF";
c5b.strokeStyle = "#3399FF";
c5b.beginPath();
c5b.arc(240,190,95,0,2*Math.PI);
c5b.stroke();
c5b.fill();
var c6y = c.getContext("2d");
c6y.fillStyle = "#FFFF00";
c6y.strokeStyle = "#FFFF00";
c6y.beginPath();
c6y.arc(410,305,105,0,2*Math.PI);
c6y.stroke();
c6y.fill();
var c7o = c.getContext("2d");
c7o.fillStyle = "#FF6600";
c7o.strokeStyle = "#FF6600";
c7o.beginPath();
c7o.arc(80,220,60,0,2*Math.PI);
c7o.stroke();
c7o.fill();
</script>
</body>
</html>
For reference: [ http://www.w3schools.com/html/html5_canvas.asp]
+1
source to share
Here is mine - JS Bin ,
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="cir_1"></div>
<div class="cir_2"></div>
<div class="cir_3"></div>
<div class="cir_4"></div>
<div class="cir_5"></div>
<div class="cir_6"></div>
</div>
</body>
</html>
CSS
.container {
border: 2px solid #000000;
width: 400px;
height: 400px;
background: #ffffff;
position: relative;
}
.cir_1 {
height: 100px;
width: 100px;
background: yellow;
border-radius : 50%;
position: absolute;
}
.cir_2 {
height: 80px;
width: 80px;
background: orange;
border-radius : 50%;
position: absolute;
left: 101px;
top: 2px;
}
.cir_3 {
height: 180px;
width: 180px;
background: purple;
border-radius : 50%;
position: absolute;
left: 169px;
top: 15px;
}
.cir_4 {
height: 110px;
width: 110px;
background: blue;
border-radius : 50%;
position: absolute;
left: 60px;
top: 81px;
}
+1
source to share