Question

我想在CSS中创建两个同心圆。内部的一个具有与外部宽度相当的指定宽度，例如。 50％。这些圈子应该是响应性的，它们应该适合所有屏幕。

我该怎么做？我不喜欢使用position：absolute，javascript或jQuery。我认为这应该是可能的。

谢谢！

enter image description here

Answer 1

纯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: 25%;
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: #e5e5e5;
  border-radius: 50%;
}

HTML：

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

请参阅Demo

Answer 2

啊...... svg可以帮忙吗？如果需要，你可以在它的元素上使用CSS，但我认为你可以严格而简单地使用它：

<!DOCTYPE html >
 <html>
   <head>
     <title> Bla! </title>
   </head>
   <body>
        <svg>
            <circle cx="80" cy="80" r="40" fill='red' stroke-width="20" stroke='black'/ >
        </svg>
   </body>
 </html>

Answer 3

http://jsfiddle.net/mG3KJ/1/

#outer {
    width: 100%;
    height: 100%;
    margin: auto;
    border-radius: 50%;
    background: black;
}
#inner {
    width: 50%;
    height: 50%;
    background: white;
    border-radius: 50%;
    position: relative;
    top: 25%;
    left: 25%;
}

CSS - 同心圆

3 个答案: