सीएसएस/CSS3

Question

का उपयोग कर परिपत्र खंड केवल सीएसएस/CSS3 का उपयोग करके परिपत्र खंड खींचने के लिए कोई भिन्नता है।

परिपत्र खंड - http://en.wikipedia.org/wiki/Circular_segment (मैं की जरूरत है कि वृत्त की हरी भाग)

मैं इस कोशिश कर रहा था:

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

लेकिन यह परिपत्र खंड की तरह नहीं दिखता।

Answer 1

चौड़ाई और div की ऊंचाई एक चक्र का निर्माण करने के लिए एक ही होना चाहिए।
जैसे:

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/

सीएसएस:

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://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

अरे इस साइट 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; 
} 

एचटीएमएल

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

लाइव डेमो http://jsfiddle.net/carTT/

और आप जैसे के रूप में शुद्ध सीएसएस में किसी भी आकार बनाने .................