सीएसएस सीमा विभिन्न आकार/रंग सीमाओं के साथ घिरा हुआ

Question

ऐसा लगता है कि जब आपके पास विभिन्न आकार/रंगीन सीमाओं वाला तत्व होता है, तो आप एक बहुत ही अजीब जाली वाली रेखा को देख सकते हैं। मैंने इससे पहले कभी नहीं देखा, लेकिन जब मैंने यह देखा (वास्तव में "गड़बड़" नहीं कहना चाहते हैं) अजीब घटना को देखते हुए Vimeo के सुपर गर्म नए डिज़ाइन को देख रहा था।

तो अगर आप एक div बाहर लटक, नीचे के रूप में स्टाइल था, तो आप एक पिक्सेल स्टेपिंग ध्यान देंगे (लगभग जैसे कि यह ठोस बजाय, इनसेट करने के लिए सेट है ...)

div { 
    height   : 25px; 
    width    : 50px; 
    background  : #eee; 
    border-style  : solid; 
    border-color  : green; 
    border-left-color : black; 
    border-width  : 3px 3px 3px 15px; 
} 

कोई भी इस नोटिस/पता है क्यों ऐसा होता है?

Answer 1

ऐसा इसलिए होता है क्योंकि यह बॉक्स के चारों ओर 'फ्रेम' बना रहा है।

लकड़ी के चित्र फ्रेम के बारे में सोचें, आप फ्रेम बनाने के लिए लकड़ी के चार आयताकार टुकड़ों का उपयोग नहीं करते हैं, आप 4 ट्रैपेज़ॉयडल टुकड़ों का उपयोग करते हैं और उन्हें एक साथ रख देते हैं। जब आप एक तरफ एक बड़ी चौड़ाई निर्धारित करते हैं, तो यह तिरछे रूप से बॉक्स के कोने की ओर अग्रसर होता है।

खराब दिखने का कारण यह है क्योंकि सीमाओं के बीच एंटीअलाइजिंग कभी अच्छा नहीं रहा है।

वैकल्पिक

तुम बस div:before{border-left: 15px solid #000;} कर सकता है यदि आप सीमाओं ऐसे ही काटी नहीं करना चाहता था ।

Answer 2

यह "गड़बड़" नहीं है - यह सीमाएं कैसे काम करती हैं। वे तिरछे से जुड़ते हैं।

, तो आप इसे एक कदम आगे ले और कोई ऊंचाई और चौड़ाई के साथ एक <div> बनाने के लिए, लेकिन एक बड़ी सीमा आप परिणाम देख सकते हैं - http://jsfiddle.net/mFzrA/

Btw - इस तकनीक शुद्ध सीएसएस त्रिकोण बनाने के लिए इस्तेमाल किया जा रहा है और स्पीच बबल्स। आप बस सीमाओं में से 3 पारदर्शी बनाते हैं और चौथाई आपको एक अच्छा त्रिकोण देता है।

Answer 3

मैं बस "सीमा वाली रेखा" से बचने के लिए सीमा पर व्यापक सीमा-चौड़ाई वाली सीमा पर बॉक्स-छाया का उपयोग करना चाहता था। मेरे लिए काम करता है, उम्मीद है कि यह मदद करता है :)

div { 
    height   : 25px; 
    width    : 50px; 
    background  : #eee; 
    border-style  : solid; 
    border-color  : green; 
    border-width  : 3px 3px 3px 0px; 
    box-shadow:-15px 0px black; 
}