Đoạn thông tư bằng cách sử dụng CSS/CSS3

Question

Có biến thể nào để vẽ đoạn hình tròn chỉ bằng CSS/CSS3 hay không.

Thông tư phân khúc - http://en.wikipedia.org/wiki/Circular_segment (Tôi cần một phần màu xanh lá cây của vòng tròn)

Tôi đã cố gắng này:

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

Nhưng nó không giống như phân khúc tròn.

Answer 1

Chiều rộng và chiều cao của div nên cùng để tạo ra một vòng tròn.
ví dụ: http://jsfiddle.net/wGzMd/

Đây là css:

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

---

EDIT (đối với phân khúc):

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

nửa vòng tròn: 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;} 

Answer 3

Hey kiểm tra trang web này http://css-tricks.com/examples/ShapesOfCSS/

và điều này http://www.russellheimlich.com/blog/pure-css-shapes-triangles-delicious-logo-and-hearts/

và điều này

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> 

sống bản demo http://jsfiddle.net/carTT/

và tạo ra bất kỳ hình dạng trong css tinh khiết như như bạn .................