是否可以使用 CSS 创建此形状（两个部分圆连接在一起）？

Question

我试图用 CSS:

完成两个 div 的边界

我试过只使用 border-radius，但两个部分圆圈没有压在一起：http://jsfiddle.net/uwz6L79w/

 .left {
   position: absolute;
   left: 0;
   top: 0;
   width: 100px;
   height: 100px;
   border-width: 4px;
   border-color: black white black black;
   border-style: solid;
   border-radius: 60px
 }
 .right {
   position: absolute;
   left: 104px;
   top: 0;
   width: 100px;
   height: 100px;
   border-width: 4px;
   border-color: black black black white;
   border-style: solid;
   border-radius: 60px;
 }

<div class="left"></div>
<div class="right"></div>

我可以将它们进一步压在一起，但我必须让一个 div 重叠另一个，像这样：http://jsfiddle.net/uwz6L79w/1/.

.left {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  border-width: 4px;
  border-color: black white black black;
  border-style: solid;
  border-radius: 60px
}
.right {
  position: absolute;
  left: 70px;
  top: 0;
  width: 100px;
  height: 100px;
  border-width: 4px;
  border-color: black black black white;
  border-style: solid;
  border-radius: 60px;
  background: #f2f2f2;
}

<div class="left"></div>
<div class="right"></div>

有谁知道如何在 div 不重叠的情况下完成此操作？

Answer 1

使用边框： ^推荐

您可以按照与第二个代码段相同的方式执行此操作，并使用如下代码段中的定位来避免两个 div 元素重叠。这里的圆圈是由伪元素生成的，重叠部分是使用 overflow: hidden 在它们的父元素上切掉的。

这里需要注意的一点是，任何悬停效果都应该添加到伪元素上，而不是父元素上。这是因为如果 :hover 附加到父项，那么即使悬停在圆圈外也会触发它（因为父项仍然是正方形）。

在此答案中提供的所有三个解决方案中，这是一个具有最佳浏览器支持并且甚至可以在 IE8 中运行的解决方案。因此，这是推荐的。

.left, .right {
  position: relative;
  float: left;
  height: 200px;
  width: 200px;
  /* border: 1px solid; uncomment to see that they aren't overlapped */
  overflow: hidden;
}
.left:after, .right:after {
  position: absolute;
  content: '';
  height: calc(100% - 12px); /* 12px because of 6px border on either side */
  width: calc(100% - 12px); /* 12px because of 6px border on either side */
  border-radius: 50%;
  border: 6px solid gray;
}
.left:after { right: -20px; }
.right:after { left: -20px; }

<div class='left'></div>
<div class='right'></div>

使用径向渐变：

如果您不想在父元素上使用伪元素和 overflow: hidden，那么您也可以使用 radial-gradient 背景图像来生成圆圈并将它们放置在这样的位置最终产生所需的效果。以下是此方法的示例片段。

这种方法的缺点是 low browser support for radial-gradient。它在 IE9 和更低版本中不起作用。另外，由径向渐变产生的圆圈通常是锯齿状的（粗糙的边缘），当我们修改色标位置以使其更平滑时，它会产生稍微模糊的外观。

.left, .right {
  float: left;
  height: 200px;
  width: 200px;
  /*border: 1px solid;  uncomment to see that they aren't overlapped */
}

/* generally the below code should be enough to produce 6px thick circular border
.left {
  background: radial-gradient(circle at 70% 50%, transparent calc(50% - 3px), gray calc(50% - 3px), gray calc(50% + 3px), transparent calc(50% + 3px));
}
.right {
  background: radial-gradient(circle at 30% 50%, transparent calc(50% - 3px), gray calc(50% - 3px), gray calc(50% + 3px), transparent calc(50% + 3px));
}
*/

/* but it produces jagged edges and so we can change the color stops a bit like below
   this produces smoother circles but the disadvantage is that they'd look a bit blurred */
.left {
  background: radial-gradient(circle at 70% 50%, transparent calc(50% - 4px), gray calc(50% - 2px), gray calc(50% + 2px), transparent calc(50% + 4px));
}
.right {
  background: radial-gradient(circle at 30% 50%, transparent calc(50% - 4px), gray calc(50% - 2px), gray calc(50% + 2px), transparent calc(50% + 4px));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='left'></div>
<div class='right'></div>

使用剪辑路径（CSS/SVG）：

另一种可以使用的方法是使用clip-path。这种方法的优点是 hover 效果只会在光标位于圆圈内时触发（如代码片段所示）。这是因为不需要的部分被剪掉了。

缺点再次是 poor browser support。 CSS 版本的 clip-path 仅在 Webkit 中受支持，但在 Firefox、IE 中不受支持，而 SVG 版本（使用内联 SVG）在 Webkit、Firefox 中受支持，但在 IE 中不受支持。

.left, .right {
  float: left;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  border: 6px solid gray;
}

/* CSS Clip Path - not supported by FF and IE */
.left.css-clip {
  clip-path: polygon(0% 0%, 80% 0%, 80% 100%, 0% 100%);
}
.right.css-clip {
  margin-left: -86px;  /* 20% width * 2 (which is the clipped space) - border width */
  clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 20% 100%);
}

/* SVG Clip Path - supported by Webkit, FF but not IE */
.left.svg-clip {
  clip-path: url(#clipper-left);
}
.right.svg-clip {
  margin-left: -86px;  /* 20% width * 2 (which is the clipped space) - border width */
  clip-path: url(#clipper-right);
}

/* Just for demo */

h3{ clear: both; }
.left:hover, .right:hover{ background: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<h3>CSS Clip Path</h3>
<div class='left css-clip'></div>
<div class='right css-clip'></div>

<h3>SVG Clip Path</h3>
<div class='left svg-clip'></div>
<div class='right svg-clip'></div>

<!-- Inline SVG for SVG Clip Path -->
<svg width='0' height='0'>
  <defs>
    <clipPath id='clipper-left' clipPathUnits='objectBoundingBox'>
      <path d='M0,0 .8,0 .8,1 0,1z' />
      </clipPath>
    <clipPath id='clipper-right' clipPathUnits='objectBoundingBox'>
      <path d='M.2,0 1,0 1,1 .2,1z' />
      </clipPath>
    </defs>
  </svg>

Answer 2

SVG

这也可以使用 SVG。

SVG版本很短，主要只需要一个Arc命令来控制它的形状、大小和位置。

<svg width="50%" viewbox="0 0 100 50">
  <path d="M50,35 
           a20,20 0 1,0 0,-20 
           a20,20 0 1,0 0,20z" 
        fill="white" 
        stroke="black">
  </path>
</svg>

SVG 代表可缩放矢量图形。 Web 浏览器将其视为图像，但您可以在 SVG 中添加文本和普通 HTML 元素。

它在所有浏览器中都得到很好的支持，如在此处查看：CanIUse

SVG | MDN

Answer 3

这是我想到的一个简单示例。我没有在不同的浏览器中测试过它，但它应该得到很好的支持。

HTML:

<div class="one"></div>
<div class="two"></div>

CSS:

div {
  background: #fff;
  border-radius: 50%;
  float: left;
  height: 100px;
  position: relative;
  width: 100px;
}

.one:after,
.two:after{
  /* adjust this to set the border color */
  background: #666;
  border-radius: 50%;
  content: "";
  position: absolute;
  z-index: -1;
  /* adjust these to set the border width */
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
}

.two {
  /* adjust this to set the overlap of the circles */
  margin-left: -20px;
}

Live Demo

Answer 4

这是一个仅使用单个 <div>.

的解决方案

.shape 是一个带有 10px 红色边框的透明圆圈。
.shape::before 是一个带有 10px 红色边框的不透明白色圆圈。
.shape::after是不透明的白色圆圈（无边框）。

.shape {
margin: 6px auto;
}

.shape, .shape::before, .shape::after {
display: block;
position: relative;
width: 160px;
height: 160px;
border-radius: 160px;
}

.shape, .shape::before {
border: 10px solid #f00;
}

.shape::before, .shape::after {
content: "";
background-color: rgba(255, 255, 255, 1);
}

.shape::before {
top: -10px;
left: -150px;
}

.shape::after {
top: -180px;
}

<div class="shape"></div>

Answer 5

我（6 周后）回到这个问题，纯粹是因为 top-voted 答案激起了我对 svg 的学术好奇心，我很少遇到也从未接受过是时候学习了。

因为我现在正在学习 svg，所以这个问题（首先让我开始学习它）似乎是尝试一些新技能的理想挑战。

所以这里有一个替代svg解决方案，相当于我上面的单一<div>css解决方案：

svg {
width: 310px;
height: 180px;
}

svg circle {
stroke: rgb(255,0,0);
stroke-width: 10;
fill: rgb(255,255,255);
}

svg circle:nth-of-type(3) {
stroke: rgb(255,255,255);
}

<svg viewbox="0 0 310 180">
<circle cx="90" cy="90" r="80" />
<circle cx="220" cy="90" r="80" />
<circle cx="90" cy="90" r="70" />
</svg>

是否可以使用 CSS 创建此形状（两个部分圆连接在一起）？

Is it possible to create this shape (two partial circles joined together) with CSS?

html

css

css-shapes

SVG