带CSS的同心圆 [英] Concentric circles with CSS

问题描述

有没有人知道如何只使用CSS绘制像RAF符号（同心红，白色和蓝色圆圈）的同心圆？

解决方案

同心圆与：

• 一个元素


• border-radius：50 ％; 以使形状圆整


• padding和 background-clip：content-box; 红色和蓝色圆圈之间的白色间隙


• 外侧蓝色圆圈的边框

class =snippetdata-lang =jsdata-hide =falsedata-console =falsedata-babel =false>

  div {width：80px; height：80px; border-radius：50％; background-color：＃CE1126; background-clip：content-box; padding：40px; border：40px solid＃00247D;}  

 < div& < / div>  

在带有多个框的1 div 的CSS中重叠圆圈阴影。

注意：由于 Harry 指出了插入框< / p>

  div {background-color：＃CE1126; width：240px; height：240px; border-radius：50％; box-shadow：inset 0 0 0 40px＃00247D，inset 0 0 0 80px #fff;}  

 < div>< / div>  

您还可以使用SVG制作同心圆。以下是使用圈子元素的示例：

 < svg viewBox =0 0 10 10width =30％ > < circle cx =5cy =5r =4stroke-width =1.5stroke =＃00247Dfill =＃fff/> < circle cx =5cy =5r =2fill =＃CE1126/>< / svg>  
 
 
Does anyone know how to draw concentric circles like the RAF symbol (concentric red, white and blue circles) using only CSS?

解决方案
You can make 3 concentric circles with :


one element
border-radius:50%; to make the shape round
padding and background-clip:content-box; for the white gap between the red and blue circles
border for the outer blue circle




div{
    width:80px;
    height:80px;
    border-radius:50%;
    background-color:#CE1126;
    background-clip:content-box;
    padding:40px;
    border:40px solid #00247D;
}

<div></div>





You can also use the approach described in Overlapping circles in CSS with 1 div with multiple box-shadows. 

Note: as Harry pointed out inset box-shadows would be better (no need for margins and enables click/hover all over the shape)



div {
  background-color: #CE1126;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 40px #00247D, inset 0 0 0 80px #fff;
}

<div></div>





You can also use SVG to make the concentric circles. Here is an example using the circle element :



<svg viewBox="0 0 10 10" width="30%">
  <circle cx="5" cy="5" r="4" stroke-width="1.5" stroke="#00247D" fill="#fff"/>
  <circle cx="5" cy="5" r="2" fill="#CE1126"/>
</svg>





                        
这篇关于带CSS的同心圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！