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

我正在尝试使用CSS完成两个div的边界：

Desired result

我尝试仅使用<div class="left"></div> <div class="right"></div>，但两个局部圆圈没有被压在一起：[http://jsfiddle.net/uwz6L79w/]

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

我可以将它们进一步按在一起，但是我必须使一个div与另一个重叠，例如：[http://jsfiddle.net/uwz6L79w/1/。

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

有谁知道我如何在没有div重叠的情况下完成此任务？

Joe Morano asked 2020-08-11T10:48:32Z
5个解决方案
45 votes

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
Stewartside answered 2020-08-11T10:48:59Z
41 votes

使用边框：推荐

您可以按照与第二个片段相同的方式进行操作，并使用下面的片段中的定位来避免两个3006565264071853030元素重叠。 在这里，圆是由伪元素产生的，重叠部分是使用其父对象上的3006565264071851853057切除的。

这里要注意的一件事是，任何悬停效果都应该添加到伪元素上，而不是父元素上。 这是因为如果将3006565264071851853056附加到父对象，则即使将鼠标悬停在圆圈外（因为父对象仍是正方形），也会触发它。

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

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

使用径向渐变：

如果您不想在父级上使用伪元素和3006565264071851853056，则还可以使用hover57背景图像生成圆并将其定位，从而最终产生所需的效果。 以下是此方法的样本片段。

这种方法的缺点是对3006565264071851853056的浏览器支持较低，在IE9及更低版本中不起作用。 另外，由径向渐变产生的圆通常呈锯齿状（粗糙边缘），当我们修改色标位置以使其更平滑时，其外观会稍微模糊。

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

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

可以使用的另一种方法是使用3006565264071853030。这种方法的优势在于，仅当光标在圆内时才能触发3006565264071851853057效果（如代码段所示）。 这是因为不必要的部分被修剪掉了。

缺点再次是浏览器支持差。 仅在Webkit中支持CSS版本<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>，而在Firefox，IE中不支持CSS版本，而在Webkit，Firefox中却不支持SVG版本（使用嵌入式SVG）。

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

Harry answered 2020-08-11T10:50:01Z
12 votes

这是仅使用一个<div class="shape"> </div>的解决方案。

  1. <div class="shape"> </div>是带有10px红色边框的透明圆圈。
  2. <div class="shape"> </div>是带有10px红色边框的不透明白色圆圈。
  3. <div class="shape"> </div>是不透明的白色圆圈（无边框）。

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

Rounin answered 2020-08-11T10:50:36Z
8 votes

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

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

现场演示

Jeff Batterton answered 2020-08-11T10:51:09Z
2 votes

我回到这个问题（六周后），纯粹是因为投票最多的答案激发了我的学术好奇心<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>，这是我很少遇到且从未花时间学习的东西。

由于我现在正在学习<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>，因此这个问题（使我开始寻求学习的问题）似乎是尝试一些新技能的理想挑战。

因此，这是一个替代的<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>解决方案，相当于我上面的单个<div> CSS解决方案：

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

Rounin answered 2020-08-11T10:51:52Z
translate from https://stackoverflow.com:/questions/33888529/is-it-possible-to-create-this-shape-two-partial-circles-joined-together-with-c