CSS - 同心圆

Question

CSS - 同心圆

use*_*099 5 css geometry css3

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

我怎样才能做到这一点？我不喜欢使用position:absolute,javascript或jQuery.我认为这应该是可能的.

谢谢!

在此输入图像描述

Answer 1

Ita*_*Gal 8

纯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%;
}

Run Code Online (Sandbox Code Playgroud)

和HTML:

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

Run Code Online (Sandbox Code Playgroud)

参见演示

Answer 2

Guy*_*fny 4

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，11 月前
查看次数：	10462 次
最近记录：	10 年，7 月前