सीएसएस सीमा-चौड़ाई प्रतिशत

Question

मैं एक div रैपिंग एक और इसलिए

<div id="container"><div id="box"></div></div> 

मान लीजिए कि कंटेनर 100px द्वारा एक आयाम 100px है चलो की तरह है। मैं 0px ऊंचाई और 0px चौड़ाई रखने के लिए बॉक्स करना चाहता हूँ। हालांकि, मैं कंटेनर का 50% भरने के लिए बॉक्स की बाएं सीमा और कंटेनर के अन्य 50% को भरने के लिए बॉक्स की दायां सीमा चाहता हूं।

मैं इसे सीएसएस के साथ कैसे कर सकता हूं?

Answer 1

आप जो भी कर रहे हैं, वह कर सकते हैं, लेकिन सीमाओं के बजाय रैखिक-ग्रेडियेंट का उपयोग कर सकते हैं।

निम्न मार्कअप का उपयोग करें:

<div class="box"></div>​ 

और निम्नलिखित शैलियों (उदाहरण: http://jsfiddle.net/HxbnK/):

.box { 
    background-image: linear-gradient(154deg, red 50%, transparent 50%), 
         linear-gradient(26deg, red 50%, transparent 50%); 
    background-position: 0 0, 100% 0; 
    background-repeat: no-repeat; 
    background-size: 50% 100%; 
    height: 100px; 
    width: 100px; 
}​ 

बस ऐसे ही .box तत्व काम करने के लिए इस के लिए एक वर्ग की जरूरत को ध्यान में रखना सही ढंग से।

Answer 2

सीमा चौड़ाई के रूप में 50px मैन्युअल रूप से गणना और निर्दिष्ट करने का छोटा, आप नहीं कर सकते हैं। border-width संपत्ति केवल लंबाई या कीवर्ड thin, medium और thick स्वीकार करती है।

जैसा कि साद इमरान सुझाव देते हैं, आप केवल दो div एस का उपयोग प्रत्येक 50% चौड़ाई के साथ कर सकते हैं।

Answer 3

वैसे ही जैसे

border-width: 10px; 

को

border-width: 10vw; 

इसका करना क्या प्रतिशत कर vw को px बदल ....