सीएसएस में अंडाकार बनाने के लिए कैसे?

मैं एक अंडाकार की तरह बनाना चाहते:सीएसएस में अंडाकार बनाने के लिए कैसे?

enter image description here

लेकिन जब मैं इस कोड का इस्तेमाल किया:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /> 
     <title>Oval</title> 
     <style type="text/css"> 
      .oval { 
       width: 160px; 
       height: 80px; 
       background: #a84909; 
       border-radius: 40px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="oval"></div> 
    </body> 
</html>

यह मुझे देता है यह:

enter image description here

एक बनाने के लिए सर्कल यह काम करता है, लेकिन एक अंडाकार नहीं।

स्रोत

2014-11-16 rachid

आपको केवल border-radius: 40px को border-radius: 50% में बदलना है।

.oval { 
 
    width: 160px; 
 
    height: 80px; 
 
    background: #a84909; 
 
    border-radius: 50%; 
 
}

<div class="oval"></div>

स्रोत

2014-11-16 19:48:05

आप प्रतिशत में बॉर्डर की त्रिज्या निर्धारित करने की आवश्यकता:

प्रतिशत: वृत्त की त्रिज्या के आकार, या अंडाकार के अर्द्ध प्रमुख और अर्द्ध नाबालिग कुल्हाड़ियों का संकेत देता, प्रतिशत मानों का उपयोग। क्षैतिज धुरी के लिए प्रतिशत बॉक्स की चौड़ाई को संदर्भित करते हैं, लंबवत धुरी के प्रतिशत प्रतिशत बॉक्स की ऊंचाई को संदर्भित करते हैं। नकारात्मक मान अमान्य हैं।

स्रोत: MDN

क्यों बॉर्डर-त्रिज्या के लिए पिक्सेल मान नहीं उत्पादन अंडाकार देख सकते हैं की एक विस्तृत विवरण के लिए Border-radius in percentage (%) and pixels (px)

उदाहरण:

border-radius: 50%;

.oval { 
 
    width: 160px; 
 
    height: 80px; 
 
    background: #a84909; 
 
    border-radius: 50%; 
 
}

<div class="oval"></div>

स्रोत

2014-11-16 19:44:25

सीमा त्रिज्या के रूप में प्रतिशत का उपयोग करें, जैसे: border-radius: 50%;।

स्रोत

2014-11-16 19:44:55 delbertooo

इस प्रयास करें:

 .oval { 
      width: 160px; 
      height: 80px; 
      background: #a84909; 
      moz-border-radius: 80px/40px; 
      webkit-border-radius: 80px/40px; 
      border-radius: 80px/40px; 
      }

पी एस। मेरे पास मेरे सामने कंपाइलर नहीं है इसलिए कुछ मामूली त्रुटि हो सकती है।

स्रोत

2014-11-16 19:45:29 FeliceM

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /> 
     <title>Oval</title> 
     <style type="text/css"> 
      .oval { 
       width: 160px; 
       height: 80px; 
       background: #a84909; 
       border-radius: 50%; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="oval"></div> 
    </body> 
</html>

सोचने का एक अन्य तरीका here समझाया गया है।

स्रोत

2014-11-16 19:45:42

सभी पिछले जवाब, वह एक चक्र अपने प्रश्न के अनुसार नहीं चाहता है। वह एक ओवल चाहता है। यह काम करता है लेकिन शायद एक बेहतर तरीका है।

#oval{position:relative;background-color:green;width:20px;height:100px; 
 
    display:inline-block;z-index:100; 
 
    } 
 
#one{background-color:green; display:inline-block;width:200px;height:100px;border-radius:50%;position:relative;left:100px;} 
 
#two{background-color:green; display:inline-block;width:200px;height:100px;border-radius:50%;position:relative;left:-100px;}

<div id="one">&nbsp;</div><div id="oval">&nbsp;</div><div id="two">&nbsp;</div>

स्रोत

2014-11-16 19:50:23 Billy

.oval { 
 
    width: 10px;/*change here*/ 
 
    height: 157px;/* or here if you want to be more sharper*/ 
 
    border-radius: 50%; 
 
    background: #1abc9c; 
 
}

<div class="oval"></div>

आप अधिक आकार चाहते हैं, आप इन का उपयोग कर उत्पन्न कर सकते हैं

http://enjoycss.com/code/

स्रोत

2016-05-28 19:08:54

सीएसएस में अंडाकार बनाने के लिए कैसे?

उत्तर

संबंधित मुद्दे