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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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命令提供的最后两个值是弧的终点。

您可以在this MDN page中找到有关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输出仍然需要对定位进行一些调整，即使整个形状主要是使用百分比值创建的。