CSS/CSS3实现圆形区段

Question

有没有使用CSS/CSS3绘制圆弧段的其他方法？

我需要圆形的绿色部分。

我尝试了这个：

div {
  width: 86px;
  height: 22px;
  background-color: green;
  border-bottom-right-radius: 42px;
  border-bottom-left-radius: 42px;
}

<div></div>

但它看起来不像一个圆弧段。

- Maryna

---

你能提供一张图片或其他东西来展示你想要实现的目标吗？ - Olly Hodgson

@OllyHodgson link - 请查看维基百科上的这篇文章。我需要圆的那个绿色部分。它应该大约有宽度：86像素，高度：22像素（它就像圆的1/2半径（不是直径））。 - Maryna

Answer 1

这是需要翻译的内容：

为了制作一个圆形，div的宽度和高度应该相同。
例如：http://jsfiddle.net/wGzMd/

以下是css代码：

div{
position: absolute;
top: 50px;
left: 50px;
width:100px;
height:100px;
border: 1px solid green;
background: green;
border-radius: 360px;
} ​

---

编辑（用于部分）：

http://jsfiddle.net/wGzMd/3/

CSS：

div.outerClass{
 position: absolute;
 left: 50px;
 top: 50px;
 height: 25px;
 overflow: hidden;
}

div.innerClass{
 width:100px;
 height:100px;
 border: 1px solid green;
 border-radius: 360px;
}

HTML:

<div class="outerClass"><div class="innerClass"></div></div>

- Ankit

---

谢谢，但我不需要完整的圆形，只需要一个弧段。你可以查看这篇文章链接，以更清楚地理解我想要实现的内容。 - Maryna

Maryna，请检查使用fiddle的新代码段：http://jsfiddle.net/wGzMd/3/ - Ankit

你真是个天才！这正是我所需要的！我建议你写信给CSS-Tricks，将这个形状添加到网站上！ - Maryna

边框半径在这里不必是 360px，它与角度无关。它只需要是元素高度的一半，即 50px。 - Oliver Tappin

Answer 2

嘿，看一下这个网站：http://css-tricks.com/examples/ShapesOfCSS/

还有这个：http://www.russellheimlich.com/blog/pure-css-shapes-triangles-delicious-logo-and-hearts/

还有这个：

http://www.css3shapes.com/

CSS

#oval {
width: 86px;
height: 22px;
background: green;
-moz-border-radius: 50px / 25px;
border-radius: 100px 100px 0 0 / 47px;
-webkit-border-radius: 100px 100px 0 0 / 47px;
}

HTML

<div id="oval"></div>

实时演示 http://jsfiddle.net/carTT/

使用纯CSS创建任何形状，就像您一样.................

- Rohit Azad Malik

---

谢谢，我之前看过css-tricks的文章，但没有找到我需要的内容。 - Maryna

这更接近我想要的了。如果能再顺畅一点就好了。你能解释一下“/ 47px”是什么意思吗？ - Maryna

好的，我在http://css-tricks.com/almanac/properties/b/border-radius/上找到了答案，那可能就是我需要的。只是为了尝试一下这些值。谢谢！ - Maryna

Answer 3

半圆形： http://www.paulund.co.uk/how-to-create-different-shapes-in-css

 div {
 height:45px;
 width:90px;
 border-radius: 0 0 90px 90px;
 -moz-border-radius: 0 0 90px 90px;
 -webkit-border-radius: 0 0 90px 90px;
 background:green;}

- user1317647

---

@Peteris，半个圆很容易，但我需要小于半个圆:) 我更新了我的问题，并附上了维基百科的链接，以澄清我的问题。 - Maryna