用CSS或SVG画半圆

Question

我正在寻找一种使用CSS或SVG绘制此圆的底部的方法。我看到了这个答案，但它只适用于完美的半圆，而我需要切掉额外的一段，使其略小于半圆。纯CSS可能不可行，但对我来说修改SVG答案会变得复杂。

<svg class="pie">
  <circle cx="115" cy="115" r="110"></circle>
  <path d="M115,115 L115,5 A110,110 1 0,1 225,115 z"></path>
</svg>

- parliament

---

这个怎么样？http://jsfiddle.net/Nbm2t/87/ - Alien

是的，这个可以工作。你能否详细解释为什么它能够工作呢？似乎是因为 ":after" 这个伪元素继承了父元素的边框半径？我之前并不知道这一点。 - parliament

Answer 1

为什么不使用两个带有弧线命令的path元素？

<svg width="135" height="135">
  <path d="M125,85 a60,60 0 1,0 -115,0" fill="#E79A16" /><!--Top Half-->
  <path d="M10,85 a60,60 0 0,0 115,0" fill="#D78500" /><!--Bottom Half-->
</svg>

你可以轻松地将它们分开。

<svg width="135" height="135">
  <path d="M125,80 a60,60 0 1,0 -115,0" fill="#E79A16" /><!--Top Half-->
</svg>
<svg width="135" height="135">
  <path d="M10,80 a60,60 0 0,0 115,0" fill="#D78500" /><!--Bottom Half-->
</svg>
<svg width="135" height="135">
  <path d="M10,0 a60,60 0 0,0 115,0" fill="#D78500" /><!--Bottom Half-->
</svg>

---

- Weafs.py

---

这就是它！ - Mellson

Answer 2

不使用 path 的简单方法。

<svg version="1.1" width="64" height="64" xmlns="http://www.w3.org/2000/svg">
    <clipPath id="cut-off">
        <rect x="0" y="0" width="64" height="40"/>
    </clipPath>

    <circle cx="32" cy="32" r="32" fill="#d08807"/>
    <circle cx="32" cy="32" r="32" fill="#e19b22" clip-path="url(#cut-off)"/>
</svg>

- Naser Mirzaei

Answer 3

您可以使用CSS来完成此操作：

.partial-circle {
  position: relative;
  height: 20px;
  width: 100px;
  overflow: hidden;
}
.partial-circle:before {
  content: '';
  position: absolute;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  bottom: 0;
  background: #D08707;
}

<div class="partial-circle"></div>

您也可以有两个部分：

.partial-circle {
  position: relative;
  width: 100px;
  overflow: hidden;
}
.partial-circle:before {
  content: '';
  position: absolute;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
.partial-circle.top {
  height: 80px;
}
.partial-circle.bottom {
  height: 20px;
}
.partial-circle.top:before {
  top: 0;
  background: #E19B21;
}
.partial-circle.bottom:before {
  bottom: 0;
  background: #D08707;
}

<div class="partial-circle top"></div>
<div class="partial-circle bottom"></div>

- Oriol

---

感谢您的回复。这个使用了与Cattla的答案相同的概念，但那个要简单得多。编辑：哦，我明白了，您的是针对顶部和底部的。 - parliament

@parliament 我想要将顶部和底部分开。这可能需要更多的代码（可以通过简化来失去清晰度），但根据您的需求，它可能更加灵活。 - Oriol