css - 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>

しかし、それは円形のセグメントのようには見えません。

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>

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で任意の形状を作成します。

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