सीएसएस के साथ तिरछा किनारों को कैसे बनाएं

इस पोस्ट में, हम यह देखने जा रहे हैं कि हम एक वेब पेज पर एंगल्ड एज इफेक्ट (क्षैतिज रूप से) कैसे बना सकते हैं। मूल रूप से, यह कुछ इस तरह दिखता है:

थोड़े कोण वाले किनारे होने से हमारे वेब लेआउट को कम कठोर और नीरस दिखना चाहिए। इस ट्रिक को करने के लिए, हम इसका उपयोग करेंगे छद्म तत्वों :: पहले तथा ::बाद तथा CSS3 के रूपांतरण.

छद्म तत्वों का उपयोग करना

यह तकनीक छद्म तत्वों का उपयोग करती है :: पहले तथा ::बाद तत्व किनारों को कोण देना। इस उदाहरण में, हम नीचे के किनारे को समायोजित करेंगे.

 .ब्लॉक ऊंचाई: 400px; चौड़ाई: 100%; स्थिति: रिश्तेदार; पृष्ठभूमि: रैखिक-ढाल (सही करने के लिए, आरजीबीए (241,231,103,1) 0%, आरजीबीए (254,182,69,1) 100%);  .block :: कंटेंट: "के बाद; चौड़ाई: 100%; ऊँचाई: 100%; स्थिति: निरपेक्ष; पृष्ठभूमि: विरासत; z-सूचकांक: -1; नीचे: 0; परिवर्तन-मूल: बाएं तल; परिवर्तन: skewY (3 डीजी) 

आओ पूर्वावलोकन कर लें.

बदलने मूल के उस तत्व के निर्देशांक को निर्दिष्ट करता है जिसे हम बदलना चाहते हैं। ऊपर दिए गए उदाहरण में हमने निर्दिष्ट किया है बायां नीचे यह ब्लॉक के निचले-बाईं ओर शुरुआती निर्देशांक रखेगा.

रूपांतर: skewY (3deg); इसे बनाएं ::बाद 3 डिग्री पर तिरछा या कोण ब्लॉक करें। चूंकि हमने शुरुआती समन्वय को नीचे-बाएं के रूप में निर्दिष्ट किया है, इसलिए ब्लॉक के निचले-दाईं ओर 3 डिग्री बढ़ जाता है। अगर हम अदला-बदली करते हैं बदलने मूल के सेवा मेरे ठीक नीचे और नीचे-बाएँ कोने को इसके बजाय 3 डिग्री ऊपर उठाया जाएगा.

आप परिणाम देखने के लिए एक ठोस रंग पृष्ठभूमि या ढाल जोड़ सकते हैं.

सास मिक्सिन के साथ इसे आसान बनाएं

इसे आसान बनाने के लिए, मैंने स्टाइल के नियमों की जटिलताओं से निपटने के लिए एंगल्ड किनारों को जोड़ने के लिए एक सैस मिक्सिन बनाया है। निम्नलिखित मिक्सिन के साथ आप जल्दी से साइड - टॉप-लेफ्ट, टॉप-राइट, बॉटम-लेफ्ट या बॉटम-राइट को तिरछा निर्दिष्ट कर सकते हैं.

 @ मिक्सिन एंगल-एज ($ पॉस-टॉप: null, $ एंगल-टॉप: null, $ pos-btm: null, $ angle-btm: null) चौड़ाई: 100%; स्थिति: रिश्तेदार; पृष्ठभूमि: रैखिक-ढाल (सही करने के लिए, आरजीबीए (241,231,103,1) 0%, आरजीबीए (254,182,69,1) 100%); & :: से पहले, और :: के बाद सामग्री: "; चौड़ाई: 100%; ऊँचाई: 100%; स्थिति: निरपेक्ष; पृष्ठभूमि: विरासत; z-सूचकांक: -1; संक्रमण: आसानी से .5s; @ आईएफ $ pos-top & :: @if $ pos-top == 'topleft' top: 0; इससे पहले; ट्रांसफ़ॉर्म-मूल: राइट टॉप; ट्रांसफ़ॉर्म: skewY ($ angle-top); @if $ pos-top = = 'topright' टॉप: 0; ट्रांसफॉर्म-ओरिजिन: लेफ्ट टॉप; ट्रांसफॉर्म: skewY (- $ कोण-टॉप); @ $ $ pos-btm & :: के बाद @if $ pos-btm == 'bottomleft' bottom: 0; transform-origin: right bottom; transform: skewY (- $ angle-btm); @if $ pos-btm == 'bottomright' bottom: 0; transform-origin - left bottom; रूपांतर: तिरछा ($ कोण-बीटीएम); 

मिश्रक में चार चर होते हैं। पहले दो चर, $ स्थिति टॉप तथा $ कोण टॉप, विवरण दें शीर्ष प्रारंभिक समन्वय और यह हद. बाद के दो चर निर्दिष्ट करते हैं समन्वय और यह हद के लिए तल पक्ष.

यदि आप सभी चार चर भरते हैं तो आप तत्व के ऊपर - नीचे और ऊपर - दोनों तरफ कोण बना सकते हैं.

सैस का उपयोग करें @शामिल मिश्रण को एक तत्व में सम्मिलित करने के लिए सिंटैक्स। आप नीचे दिए गए उदाहरण देख सकते हैं:

पर तिरछी धार जोड़ने के लिए बाएं से बाएं पक्ष:

 .block @include angle-edge (topleft, 3deg);  

पर तिरछी धार जोड़ने के लिए नीचे दाएं पक्ष:

 .ब्लॉक @include एंगल-एज (निचला, 3 डीजी);  

पर तिरछी धार जोड़ने के लिए बाएं से बाएं तथा नीचे दाएं पक्ष:

 .ब्लॉक @include एंगल-एज (टॉपलेट, 3 डीजी, निचला, 3 डीजी);  

नीचे मिक्स के साथ डेमो लागू किया गया है। किसी अन्य शैली से टॉगल करने के लिए चयन बॉक्स बदलें.

बस!