एक हब पर लंबे समय तक सीएसएस के बारे में कोई पोस्ट नहीं थे और मैंने इस अंतर को भरने का फैसला किया। आज हम सीख रहे हैं कि केवल CSS और छवियों का उपयोग करके दांतेदार पृष्ठभूमि कैसे बनाई जाए!
इस तरह की बाड़ के लिए महत्वपूर्ण आवश्यकताएं:
- कोई चित्र नहीं!
- इसे शांति से क्षैतिज रूप से फैलाना चाहिए
- सब्सट्रेट पर असमान पृष्ठभूमि का समर्थन करना सुनिश्चित करें
- पृष्ठभूमि को किसी भी अतिरिक्त मार्कअप की आवश्यकता नहीं होनी चाहिए। छद्म तत्वों से सबसे अच्छा बचा जाएगा (बचत अच्छी है)।
समर्थित ब्राउज़र: क्रोम, फ़ायरफ़ॉक्स (> 3.6), ओपेरा (> = 12), सफारी (> = 5), IE10।
IE 7, 8 के लिए हम एक नियमित रूप से भरने के रूप में एक वापसी होगी। लेकिन IE9 के साथ एक समस्या है - यह ग्रेडिएंट का समर्थन नहीं करता है, लेकिन यह एचएसएल और आरजीबीए रंगों को समझता है। सचमुच एक "महान" ब्राउज़र। खैर, इसे अभी के लिए नजरअंदाज करना होगा। अगर कोई मुझे IE के लिए एक अच्छा कमबैक बताता है, तो मैं केवल आभारी रहूंगा।
अच्छा, चलिए शुरू करते हैं।
हमारे स्कैलप्ड किनारे में दो त्रिकोण शामिल होंगे जो एक दूसरे को ओवरलैप कर रहे हैं।
background-image: linear-gradient(to bottom right, transparent 50.5%, lightblue 50.5%), linear-gradient(to bottom left, transparent 50.5%, lightblue 50.5%); background-repeat: repeat-x, repeat-x; background-position: 10px 0, 10px 0; background-size: 20px 20px, 20px 20px;
नीचे के सभी अप्रिय क्षणों को छिपाने के लिए, बस एक ठोस रंग के ऊपर लेटें।
border-top: 10px solid transparent; background-image: linear-gradient(lightblue, skyblue), linear-gradient(to bottom right, transparent 50.5%, lightblue 50.5%), linear-gradient(to bottom left, transparent 50.5%, lightblue 50.5%); background-repeat: repeat, repeat-x, repeat-x; background-position: 0 0, 10px 0, 10px 0; background-size: auto auto, 20px 20px, 20px 20px; background-clip: padding-box, border-box, border-box; background-origin: padding-box, border-box, border-box, border-box, border-box;
खैर, यह बात है। यह नीचे से एक ही दांत जोड़ने के लिए बनी हुई है।
border-top: 10px solid transparent; background-image: linear-gradient(lightblue, skyblue), linear-gradient(to bottom right, transparent 50.5%, lightblue 50.5%), linear-gradient(to bottom left, transparent 50.5%, lightblue 50.5%), linear-gradient(to top right, transparent 50.5%, skyblue 50.5%), linear-gradient(to top left, transparent 50.5%, skyblue 50.5%); background-repeat: repeat, repeat-x, repeat-x, repeat-x, repeat-x; background-position: 0 0, 10px 0, 10px 0, 10px 100%, 10px 100%; background-size: auto auto, 20px 20px, 20px 20px, 20px 20px, 20px 20px; background-clip: padding-box, border-box, border-box, border-box, border-box; background-origin: padding-box, border-box, border-box, border-box, border-box;
गिरावट के बारे में मत भूलना:
background-color: lightblue; background-color: hsla(0, 0%, 0%, 0);
नतीजतन, हमें दांतों के साथ एक ब्लॉक मिला जिसे आप जितना चाहें उतना बढ़ाया जा सकता है। छद्म तत्व शामिल नहीं हैं, उनका उपयोग किया जा सकता है, उदाहरण के लिए, पक्षों पर समान दांत जोड़ने के लिए।
डेमो