मुझे थॉमसए का जवाब पसंद है, लेकिन दो तलाक को अलग करने के लिए इस्तेमाल की जा रही लहर के साथ अधिक यथार्थवादी संदर्भ चाहते थे। इसलिए मैंने एक और पूर्ण डेमो बनाया, जहां विभाजक एसवीजी दो डिवीजनों के बीच पूरी तरह से तैनात हो जाता है।
अब मुझे लगा कि इसे और आगे ले जाना अच्छा रहेगा। क्या होगा अगर हम इनलाइन एसवीजी की आवश्यकता के बिना CSS में यह सब कर सकते हैं ? अतिरिक्त मार्कअप से बचने के लिए बिंदु। यहाँ है कि मैंने यह कैसे किया:
दो सरल <div>
:
#A {
background: #0074D9;
}
#B {
background: #7FDBFF;
}
#A::after {
content: "";
position: relative;
left: -3rem;
top: calc( 3rem - 4rem / 2);
float: left;
display: block;
height: 4rem;
width: 100vw;
background: hsla(0, 0%, 100%, 0.5);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 70 500 60' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='500' height='500' style='stroke: none; fill: %237FDBFF;' /%3E%3Cpath d='M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z' style='stroke: none; fill: %230074D9;'%3E%3C/path%3E%3C/svg%3E");
background-size: 100% 100%;
}
* {
margin: 0;
}
#A,
#B {
padding: 3rem;
}
div {
font-family: monospace;
font-size: 1.2rem;
line-height: 1.2;
}
#A {
color: white;
}
<div id="A">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec quam tincidunt, iaculis mi non, hendrerit felis. Nulla pretium lectus et arcu tempus, quis luctus ex imperdiet. In facilisis nulla suscipit ornare finibus. …
</div>
<div id="B" class="wavy">… In iaculis fermentum lacus vel porttitor. Vestibulum congue elementum neque eget feugiat. Donec suscipit diam ligula, aliquam consequat tellus sagittis porttitor. Sed sodales leo nisl, ut consequat est ornare eleifend. Cras et semper mi, in porta nunc.</div>
डेमो वेवी विभक्त (सीएसएस छद्म तत्वों के साथ अतिरिक्त मार्कअप से बचने के लिए)
यह इनलाइन SVG की तुलना में स्थिति के लिए थोड़ा पेचीदा था लेकिन साथ ही साथ काम करता है। (सीएसएस कस्टम गुण या पूर्व प्रोसेसर चर का उपयोग करने के लिए ऊंचाई और पढ़ने के लिए आसान रखने के लिए उपयोग कर सकते हैं।)
रंगों को संपादित करने के लिए, आपको URL-एनकोडेड SVG को स्वयं संपादित करना होगा।
एसवीजी में अवांछित स्थानों से छुटकारा पाने के लिए एक बदलाव परviewBox
(पहले डेमो की तरह) ध्यान दें । (दूसरा विकल्प एक अलग एसवीजी तैयार करना होगा।)
यहां ध्यान देने वाली एक और बात यह है कि इसे दोनों दिशाओं में फैलाने के लिए background-size
सेट किया 100% 100%
गया है।