मोजो रिबन - लेस में सही टेप या त्रिकोणमिति

शुभ दिन प्रिय हरजितेली। हाल ही में, एक परियोजना में, मुझे ब्लॉकों के लिए एक रिबन बनाने की आवश्यकता थी। उदाहरण के लिए: बहुत बार वे शिलालेख के साथ एक टेप बनाते हैं शीर्ष पर "मुझे कांटा पर गिटहब", या पोर्टफोलियो में प्रत्येक तत्व पर काम के प्रकाशन की तारीख के साथ एक टेप है। मैं आधिकारिक LESS वेबसाइट से बेहतर उदाहरण दिखा सकता हूं, क्योंकि यह इतना छोटा विवरण है कि कुछ लोग इस पर ध्यान नहीं दे सकते।



यह रिबन निरपेक्ष स्थिति वाले लिंक के अंदर एक छवि है। इस विकल्प के साथ मुझे क्या पसंद नहीं है? सबसे पहले: मैं वास्तव में आधुनिक सीएसएस मानकों को पसंद करता हूं, जिसके साथ आप कम से कम छवियों का उपयोग करके एक अच्छा डिज़ाइन बना सकते हैं, और इस मामले में रिबन transform rotate से transform rotate साथ एक नियमित ब्लॉक हो सकता है। दूसरी बात: हाल ही में, मैं एक रेटिना डिस्प्ले के माध्यम से वेब को देखता हूं और बिना किसी अडॉप्ट किए हुए img तुरंत मेरी नजर पड़ जाती है, लेकिन डेवलपर्स किसी तरह के रिबन पर भी ध्यान देते हैं, मीडिया के प्रश्नों के साथ अपने डिस्प्ले को ऑप्टिमाइज़ करते हैं, यह मुझे थोड़ा मजाकिया भी लगता है।

500px की लंबाई, 50px की ऊंचाई के साथ पूर्ण स्थिति, शीर्ष, बाएं के साथ एक ब्लॉक बनाएं। परिणाम वही है जो हम बाईं ओर नीचे की छवि में देखते हैं। अगला, -45 डिग्री से ब्लॉक को घुमाएं ताकि हम रिबन के साथ लेस के समान कुछ प्राप्त करें। परिणाम छवि के दाईं ओर दिखाया गया है। हमारा तत्व अपने केंद्र से घूमता है, जिसके परिणामस्वरूप बाईं ओर एक इंडेंट होता है, और भविष्य के टेप का हिस्सा कार्य क्षेत्र को छोड़ देता है।



निरीक्षक की सहायता से, हम उन मूल्यों का चयन कर सकते हैं जिनकी हमें top और -left लिए आवश्यकता है। इस विकल्प के साथ मुझे क्या पसंद नहीं है? सबसे पहले, पूर्णतावाद: मैं चाहता हूं कि अधिकतम निर्दिष्ट पिक्सेल (इस मामले में 500) को कार्यक्षेत्र में प्रदर्शित किया जाए और इससे परे नहीं। दूसरी बात - आलस्य: मैं स्थिति को बदलने (शीर्ष, दाएं, नीचे, बाएं) और झुकाव की डिग्री के दौरान सभी कोनों को छिपाने के लिए मैन्युअल रूप से मानों का चयन नहीं करना चाहता।

ज्यामिति

जैसा कि मैंने कहा, तत्व को केंद्र से घुमाया जाता है। इसलिए, इंडेंटेशन मानों को कार्य क्षेत्र के किनारे से केंद्र तक मापा जाता है। परिणामी आंकड़ों की कल्पना करें - त्रिकोण, जिन पक्षों की हमें गणना करने की आवश्यकता है:


यह दो त्रिभुज ABC और A2B2C2 निकला , जिन पक्षों की हमें गणना करने की आवश्यकता है। हम जानते हैं कि C = 500px (चौड़ाई), C2 = 50px (ऊँचाई), झुकाव का कोण -65 (नीचे) है, इसलिए, त्रिभुज ABC में कोण 65 डिग्री है, और कोण b 25 डिग्री (180 - 90 - 65) है । त्रिभुज A2B2C2 में, कोण a2 और b2 क्रमशः 65 और 25 डिग्री हैं।

त्रिकोणमिति

सब कुछ सरल है। कोण की साइन हाइपिनोसिस के विपरीत पक्ष के अनुपात के बराबर है। इसलिए:

ए = पाप (ए) * सी या ए = पाप (65) * 500;
बी = पाप (बी) * सी या बी = पाप (25) * 500;

ए 2 = पाप (ए 2) * सी 2 या ए 2 = पाप (65) * 50;
बी 2 = पाप (बी 2) * सी 2 या बी 2 = गाना (25) * 50;

कम

 .MojoRibbon(@width, @height, @deg, @valign) { width: @width; height: @height; -webkit-box-sizing: border-box; /*       padding */ -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; .defineDegree(@deg, @valign) when (@deg < 0) and (@valign = top) { @degree: -@deg; /*   ,   sin */ top: @countHeight; left: @countWidth; -webkit-transform: rotate(@deg); -moz-transform: rotate(@deg); -o-transform: rotate(@deg); -ms-transform: rotate(@deg); transform: rotate(@deg); }; .defineDegree(@deg, @valign) when (@deg < 0) and (@valign = bottom) { @degree: -@deg; /*   ,   sin */ bottom: @countHeight; right: @countWidth; /*            ,          */ -webkit-transform: rotate(@deg); -moz-transform: rotate(@deg); -o-transform: rotate(@deg); -ms-transform: rotate(@deg); transform: rotate(@deg); }; .defineDegree(@deg, @valign) when (@deg > 0) and (@valign = top) { @degree: @deg; top: @countHeight; right: @countWidth; -webkit-transform: rotate(@degree); -moz-transform: rotate(@degree); -o-transform: rotate(@degree); -ms-transform: rotate(@degree); transform: rotate(@degree); }; .defineDegree(@deg, @valign) when (@deg > 0) and (@valign = bottom) { @degree: @deg; bottom: @countHeight; left: @countWidth; /*            ,          */ -webkit-transform: rotate(@degree); -moz-transform: rotate(@degree); -o-transform: rotate(@degree); -ms-transform: rotate(@degree); transform: rotate(@degree); }; .defineDegree(@deg, @valign) when (@deg = 0) { @degree: @deg; top: 0; left: 0; }; .defineDegree(@deg, @valign); @angleB: 90-@degree; @angleB2: @angleB; @sideA: round(sin(@degree), 3)*@width; /*   */ @sideB: round(sin(@angleB), 3)*@width; /*  B */ @sideB2: round(sin(@angleB2), 3)*@height; /*  2 */ @sideA2: round(sin(@degree), 3)*@height; /*  B2 */ @countHeight: @sideA/2 - @height/2 - @sideB2/2; @countWidth: -((@width)-(@sideB))/2 - @sideA2/2; } 

डेमो परिणाम
GitHub

सभी के लिए बहुत-बहुत धन्यवाद मैं सीएसएस ध्यान के लिए बोर ।