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