सीएसएस सीमा-बाएं 50% ऊंचाई

Question

मैं चाहता हूं कि मेरे div की बाईं सीमा केवल div के आधे भाग को दिखाए। वही मैं अपनी दाहिनी सीमा पर करना चाहता हूं लेकिन div के नीचे से div के बीच में सेट किया जाना चाहिए। मैं इसे कैसे प्राप्त कर सकता हूं?

Answer 1

अच्छा सवाल। सीमा संपत्ति का उपयोग करना संभव नहीं है।

केवल एक चीज है जो मन में आता है, तो आप सेट कर सकते हैं यदि आपके div के positionrelative करने के लिए, एक बिल्कुल उपयुक्त, 1 पिक्सेल विस्तृत div उपयोग करने के लिए है। अच्छी तरह से नहीं परीक्षण किया है, लेकिन इस चाहिए काम:

<div style='width: 1px; top: 0px; bottom: 50%; left: 0px; 
      background-color: blue; overflow: hidden'> 
&nbsp; 
</div> 

आप दाहिने हाथ की ओर भी ऐसा ही चाहते हैं, right द्वारा left संपत्ति का स्थान लिया।

याद रखें, आसपास के div को काम करने के लिए position: relative होना चाहिए। मुझे यकीन नहीं है कि 50% ऊंचाई सेटिंग ब्राउज़र भर में लगातार काम करेगी - सुनिश्चित करें कि आप इसका परीक्षण करें। अगर आपको ऐसा नहीं होता है तो आपको पिक्सेल उपायों का सहारा लेना पड़ सकता है।

Answer 2

एक प्रकार के- @ पेका के लिए इसी तरह की है, लेकिन अलग दृष्टिकोण: तो जैसे :after छद्म का भी उपयोग कर,:

एचटीएमएल मार्कअप:

<div class="mybox"> 
    Le content de box. 
</div> 

सीएसएस:

.mybox { 
    position: relative; 
    padding: 10px 20px; 
    background-color: #EEEEEE; 
} 

.mybox:after { 
    content: ''; 
    position: absolute; 
    bottom: 0px; 
    left: 25%; 
    width: 50%; 
    border-bottom: 1px solid #0000CC; 
} 

... और jsFiddle अच्छी माप के लिए।

Answer 3

आप उपयोग कर सकते हैं:

line-height:50%; /*(or less, much less)*/ 
overflow:visible; 

पाठ दिखाई देता है, लेकिन सीमा रंग केवल div आकार के आधे पर किया जाएगा।

Answer 4

2018:आधुनिक ब्राउज़रों के लिए:

आप ढ़ाल कुछ तरह के साथ border-image उपयोग कर सकते हैं ...

border-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 75%); 
border-image-slice: 1; 

डेमो:https://jsfiddle.net/hz8wp0L0/

उपकरण:Gradient Editor

मैं उपयोग कर सकते हैं:border-image(IE11)