अंडाकार गोलाकार किनारों के साथ आयताकार div कैसे शैलीबद्ध करें?

अंडाकार गोलाकार किनारों के साथ आयताकार div कैसे शैलीबद्ध करें?

अंडाकार गोलाकार किनारों के साथ आयत

0
मुझे स्लाइडर के लिए इस आकृति का एक div चाहिए।
जोड़ा लेखक Rabbia Annum, स्रोत

2 उत्तर

क्या आपने इस वेबसाइट की जांच की है? इसे आज़माएं:

div
{
border:2px solid;
border-radius:25px;
}
0
जोड़ा
मैंने सीमा-त्रिज्या की कोशिश की है, लेकिन यह एक समय में केवल 2 विपरीत पक्ष अंडाकार बनाता है।
जोड़ा लेखक Rabbia Annum, स्रोत

आप सीमा-त्रिज्या 50% सेट करके एक अंडाकार प्राप्त कर सकते हैं।

आप अलग-अलग आकारों के साथ, दो तत्वों को एक दूसरे के अंदर प्राप्त कर सकते हैं, और इसलिए 2 इलिप्स की आवश्यकता होती है

.test {
    position: absolute;
    left: 40px;
    top: 40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden; 
}


.test:after {
    content: "";
    position: absolute;
    left: -30%;
    top: 10%;
    width: 160%;
    height: 80%;
    background-color: lightblue;
    border-radius: 50%;

}

इस मामले में, एक छद्म तत्व का उपयोग करके, और इसलिए, केवल एक div की आवश्यकता है

डेमो

0
जोड़ा