CSS

Question

I want to create two concentric circles in CSS. The inner one has a specified width compaired to the outer one, e.g. 50%. Those circles should be responsive, they should scale properly for all screens.

How can I do this? I prefer not to use position:absolute, javascript or jQuery. I think it should be possible.

Thanks!

enter image description here

How can I do this? I prefer not to use position:absolute, javascript or jQuery. I think it should be possible.

Thanks!

enter image description here

Itay Gal · Accepted Answer

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

And the HTML:

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

See the Demo

Guy Dafny · Answer

Ah ... svg can help? You can use CSS on it's elements if needed, but I think you can do it strict and simple:

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

CSS - Concentric circles [duplicate]

Tags:

geometry

user3103099

2 Answers

Itay Gal

Guy Dafny

Recent Activity

Donate For Us