同心圆与 CSS [英] Concentric circles with CSS

问题描述

有谁知道如何仅使用 CSS 绘制同心圆，例如 RAF 符号(同心圆的红色、白色和蓝色圆圈)?

解决方案

你可以用 :

制作 3 个同心圆

• 一个元素
• border-radius:50%; 使形状变圆
• padding 和 background-clip:content-box; 用于红色和蓝色圆圈之间的白色间隙
• 蓝色外圈的边框

div{宽度:80px；高度:80px；边界半径:50%；背景色:#CE1126;背景剪辑:内容框；填充:40px；边框:40px 实心 #00247D;}

<div></div>

您还可以使用重叠圆圈中描述的方法带有 1 个 div 和多个框阴影的 CSS.

注意:正如 Harry 指出插入框阴影会更好(不需要边距和启用单击/悬停在整个形状上)

div {背景颜色:#CE1126；宽度:240px；高度:240px；边界半径:50%；框阴影:插入 0 0 0 40px #00247D，插入 0 0 0 80px #fff；}

<div></div>

您还可以使用 SVG 制作同心圆.这是一个使用 circle 元素 的示例:>

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屋！