सीएसएस

Question

के साथ छवि के अंदर वक्र क्या यह संभव है और मैं छवि को ऊपर और नीचे के अंदर एक वक्र कैसे बना सकता हूं, छवि देखें। मैं इसे सीएसएस के साथ कैसे प्राप्त कर सकता हूं?

Answer 1

एक div पर एक पृष्ठभूमि छवि के रूप में अपनी छवि को सेट करें और इस तकनीक का उपयोग करें। मैंने अपने उदाहरण में एक ठोस लाल रंग का उपयोग किया है।

यहां मैंने ऊपर और नीचे वक्र बनाने के लिए छद्म तत्वों का उपयोग किया। ध्यान दें कि शीर्ष और निचला ऑफसेट प्रत्येक छद्म तत्व की ऊंचाई के आधा है और सीमा त्रिज्या 50% पर सेट है।

div { 
 
    width:500px; 
 
    height:200px; 
 
    background:red; 
 
    position:relative; 
 
    overflow:hidden; 
 
} 
 
div:after, 
 
div:before { 
 
    content:''; 
 
    background:white; 
 
    position:absolute; 
 
    top:-10px; 
 
    left:0; 
 
    width:100%; 
 
    height:20px; 
 
    border-radius:0 0 50% 50%; 
 
} 
 
div:after { 
 
    top:auto; 
 
    bottom:-10px; 
 
    border-radius:50% 50% 0 0 ; 
 
}

<div></div>