使用CSS交叉圆圈

Question

我正在尝试使用CSS创建它.实际上,这是三个相交圆的中心点.我认为这是可能的,但似乎无法弄明白.但话说回来,CSS并不是我最强项.救命？

我已经设法使用下面的片段创建了一个半圆(也可以创建另外两个),但我不知道如何定位或对齐它们以获得输出,如图像中所示.

.test{
  height: 100px;
  width: 100px;
  border-radius: 50%;
  border: 1px solid black;
  border-color: black black transparent transparent;
}

<div class='test'></div>

Answer 1

一个可行的解决方案,使用半圆,克隆通过伪元素,并旋转它们

#test {
  width: 200px;
  height: 100px;
  border: solid 10px red;
  border-radius: 9999px 9999px 0px 0px;
  border-bottom-style: none;
  margin: 100px;
  position: relative;
}


#test:before, #test:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: -10px;
  left: -10px;
  border: inherit;
  border-radius: inherit;
}

#test:before {
  transform: rotate(120deg);
  transform-origin: 50% 43%;
}

#test:after {
  transform: rotate(-120deg);
  transform-origin: 50% 43%;
}

<div id="test"></div>

另一个解决方案,更接近请求,但使用几个div

#test {
  margin: 400px 200px;
}

.leaf {
  width: 200px;
  height: 200px;
  border: solid 2px red;
  border-radius: 9999px 0px 9999px 0px;
  background-color: lightgreen;
  position: absolute;
  transform-origin: top right;
}

.leaf:nth-child(1) {
  transform: skewX(-31deg);
}

.leaf:nth-child(2) {
  transform: rotate(120deg) skewX(-31deg);
}

.leaf:nth-child(3) {
  transform: rotate(-120deg) skewX(-31deg);
}

<div id="test">
    <div class="leaf"></div>
    <div class="leaf"></div>
    <div class="leaf"></div>
</div>

Answer 2

这是一个基于SVG的答案.我正在添加此选项,即使您仅使用CSS标记标记了问题,因为SVG在这些形状方面具有很多优势.

• SVG提供对曲线的更多控制,更易于创建/维护.它不涉及任何变换或复杂的转换逻辑.
• SVG默认是响应式的,因此可以轻松扩展而不会出现任何问题.
• 使用SVG时,连接在一起的三个圆的部分可以保持为弧形而不是半圆形.弧形倾向于为这种特定形状产生更加优雅/美观的输出.

svg {
  height: 200px;
  width: 200px;
}
path {
  stroke: black;
  fill: transparent;
}

/* just for demo */

svg {
  transition: all 1s ease;
}
svg:hover {
  height: 300px;
  width: 300px;
}

<svg viewBox='0 0 100 100'>
  <path d='M5,78.77 A40,40 0 0,0 40.35,17.10 A40,40 0 0,0 74,78.77 A40,40 0 0,0 5,78.77z' />
</svg>

SVG路径:

创建形状所需的只是一个path元素,其中有一些创建弧的路径命令.此代码段中使用的SVG路径命令(甚至其余部分)非常容易理解.以下是您的好处的一个小解释.

• M - 此命令将虚拟绘图笔移动到坐标指定的点.
• A - 此命令用于根据给定半径从起点到终点绘制弧(或半圆或甚至圆).起点是在A给出命令之前笔的位置.该A命令后面的前两个值是X和Y轴上的圆弧半径.随A命令提供的最后两个值是弧的终点.

您可以在此MDN页面中找到有关SVG路径命令的更多详细信息.

使用CSS:

如前所述,我不推荐使用CSS作为这种形状,因为在图像中完全创建它涉及大量的转换,近似/计算每个弧应该有多宽等等.但如果你仍然希望继续使用CSS然后看看下面的片段.

.wrapper {
  position: relative;
  height: 200px;
  width: 200px;
}
.arc {
  position: absolute;
  height: 100%;
  width: 29%;
  overflow: hidden;
  backface-visibility: hidden;
}
.arc:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 300%;
  border-radius: 50%;
  border: 2px solid;
}
.arc:nth-child(3) {
  top: -1px;
  transform: translateX(-100%) rotate(90deg);
  transform-origin: bottom right;
}
.arc:nth-child(2) {
  left: calc(100% - 5px);
  transform: translateX(-100%) rotate(-30deg);
  transform-origin: bottom right;
}
.arc:nth-child(1):after {
  right: 0;
}
.arc:nth-child(1) {
  transform: rotate(30deg);
  transform-origin: bottom left;
}

/* just for demo */

.wrapper {
  transition: all 1s ease;
}
.wrapper:hover {
  height: 300px;
  width: 300px;
}

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

我们必须使用多个元素,因为我们需要创建弧(而不是半圆),以使形状与图像完全相同.在CSS中创建弧的一种方法是将圆放在另一个div宽度小于圆本身然后使用的圆中overflow: hidden.在代码片段中,我们使用三个.arc元素来创建弧,相对于父.wrapper元素绝对定位它们,然后使用CSS变换来旋转和/或翻译它们.

我们可以直观地看到与CSS输出相比,SVG输出在美学上更令人愉悦.我们还可以看到SVG输出是如何响应的(将形状悬停在任何一个片段中),而CSS输出仍然需要对定位进行一些调整,即使整个形状主要是使用百分比值创建的.