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

我试图用CSS实现两个div的边界：

我尝试只使用

边界半径

，但两个部分圆没有压在一起：

。左{
位置：绝对位置；
左：0；
排名：0；
宽度：100px；
高度：100px；
边框宽度：4px；
边框颜色：黑-白-黑-黑；
边框样式：实心；
边界半径：60像素
}
.对{
位置：绝对位置；
左：104px；
排名：0；
宽度：100px；
高度：100px；
边框宽度：4px；
边框颜色：黑白；
边框样式：实心；
边界半径：60px；
}

---

建议使用边框：

您可以使用与第二个代码段相同的方法进行操作，并像下面的代码段一样使用定位，以避免两个

div

元素重叠。在这里，圆是由伪元素生成的，重叠部分是使用父元素上的

overflow:hidden

切掉的

这里需要注意的一点是，任何悬停效果都应该添加到伪元素上，而不是父元素上。这是因为，如果将

：hover

附加到父对象，则即使在圆外悬停，也会触发它（因为父对象仍然是正方形）

在本回答中提供的所有三种解决方案中，这是一种具有最佳浏览器支持的解决方案，即使在IE8中也适用。因此，这是推荐的

.left、.right{
位置：相对位置；
浮动：左；
高度：200px；
宽度：200px；
/*边框：1px实心；取消注释以查看它们是否重叠*/
溢出：隐藏；
}
.左：后，.右：后{
位置：绝对位置；
内容：''；
高度：计算（100%-12px）；/*12px，因为两边的边界都是6px*/
宽度：计算（100%-12px）；/*12px，因为两边的边界都是6px*/
边界半径：50%；
边框：6px实心灰色；
}
.left:在{right:-20px；}之后
.right:在{left:-20px；}之后

SVG 使用SVG也可以做到这一点

SVG版本非常简短，因为它主要只需要一个Arc命令来控制其形状、大小和位置

---

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

HTML:

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

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

---

这里有一个解决方案，只需使用一个

.shape

是一个带有

10px

红色边框的透明圆

.shape:：before

是一个不透明的白色圆圈，带有

10px

红色边框

.shape:：after

是一个不透明的白色圆圈（无边框）

.shape{
保证金：6px自动；
}
.shape、.shape:：之前、.shape:：之后{
显示：块；
位置：相对位置；
宽度：160px；
高度：160px；
边界半径：160像素；
}
.shape、.shape:：之前{
边框：10px实心#f00；
}
.shape:：之前，.shape:：之后{
内容：“；
背景色：rgba（255、255、255、1）；
}
.形状：：之前{
顶部：-10px；
左：-150px；
}
.形状：：之后{
顶部：-180px；
}

---

我回到这个问题上来（6周后），纯粹是因为得票最高的答案激发了我对

svg

的学术好奇心，我很少遇到，也从未花时间学习

由于我现在正在学习

svg

，这个问题（让我开始学习它）似乎是一个理想的挑战，可以用来尝试一些新技能

因此，这里有一个替代的

svg

解决方案，相当于我上面的单个

css解决方案：

svg{
宽度：310px；
高度：180像素；
}
svg圆{
行程：rgb（255,0,0）；
笔画宽度：10；
填充：rgb（255255）；
}
svg圆：第n个类型（3）{
行程：rgb（255255）；
}

是的，这是可能的。看一看并试着划去无限。你也可以用伪元素重叠来完成。你的第二个代码片段对我来说很好。你能提供一个屏幕截图，说明它在你看来是什么样子，以及你使用的是什么浏览器吗？@Bergi:OP不想让它重叠。也就是说，如果你给一个

div

添加背景，你会看到他们将第二个

div

的一部分放在第一个上方。@Harry:是的，但是这个例子没有背景，所以我不确定问题出在哪里。也许有比避免重叠更好的方法解决问题？第二种方法有粗糙的边缘，你知道有没有办法解决这个问题吗？@jaunt：通过调整渐变的颜色停止百分比，可以在一定程度上减少它，但我认为我们不能完全消除它。@jaunt：我更新了第二个解决方案，以生成更平滑的圆（更改了颜色停止百分比）但这似乎是径向梯度的最大值。啊，好吧，我明白你现在说的，看起来确实更好imo@slebetman：画圆圈-是。但我不是在那里画圆圈。我正在调整使用边框创建的用户圆圈，以克服“不重叠”的问题，剪裁不必要的部分是实现这一点的一种方法，同时保留OPs的原始工作。只需使用一个路径元素，您就可以在它们之间获得更整洁的连接。@Anko不知道我为什么一开始没有想到这一点：P.为建议并修改了我的答案：）你应该使用

#FFF

，

#FFFFFF

，

白色

或

rgb（255，255，255）

。因为您指定的颜色没有不透明度，所以不需要

rgba

。这可能会让浏览器毫无代价地工作得更努力一些。要简化IE8支持，可以使用

：before

和

：after

。在IE8上有很多库可以添加对圆形边框的支持。但是，除此之外，即使在IE8上，您的解决方案也能工作（具有上述更改）！！！（圆形边框除外）。这