CSS – 同心圆

前端之家收集整理的这篇文章主要介绍了CSS – 同心圆前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

参见英文答案 > Concentric circles with CSS                                    6个
我想在CSS中创建两个同心圆.内部的一个具有与外部宽度相当的指定宽度,例如. 50%.这些圈子应该是响应性的,它们应该适合所有屏幕.

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

谢谢!

最佳答案
纯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:

见@L_403_1@

猜你在找的CSS相关文章