使用HTML和CSS的相邻圆圈

时间：2014-09-10 17:35:54

标签： html css geometry css3 css-shapes

我想知道是否可能，如果是这样，如何使用HTML和CSS绘制下图所示的相邻圆圈？

enter image description here

4 个答案:

答案 0 :(得分：4)

您可以尝试这样：

JSFIDDLE DEMO （添加了几个圈子以使其更有趣）

<强> 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>

答案 1 :(得分：2)

当然！创建一些div，每个div都有position:absolute，宽度和高度为0.然后对每个div应用边框和边框半径，并通过反复试验来定位它们。

here's a sample

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 :(得分：1)

我会推荐使用HTML5实现的<canvas>标记。它需要一些Javascript来绘制圆圈，但会给你很多力量。以下是示例图像的基本模型：

<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>

供参考，请查看：[http://www.w3schools.com/html/html5_canvas.asp]

答案 3 :(得分：1)

这是我的 - 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;
}
相关问题
最新问题