सीएसएस - सीमा जहां सीमा का केवल आधा दिखाई देता है

Question

मैं उलझन में हूं कि इसे केवल सीएसएस में काम करना है जहां सीमा केवल आधी की चौड़ाई पर दिखाई देगी।

बॉर्डर शैली एक सरल 1px solid #000;

है हालांकि, मैं div के शीर्ष, '(रों चौड़ाई पहले पर नहीं बल्कि केवल रों सीमा div पर 100% पर) हर जगह दिखाई नहीं करने के लिए' चाहते हैं div की चौड़ाई का 50%।

मैं इसे कहीं भी उदाहरण नहीं प्राप्त कर पाया है, और इसे प्रतिशत में होना चाहिए, इसलिए चाल का सामान्य बैग (दूसरी छमाही पर छवि ...)।

Answer 1

इस काम करेंगे:

#holder { 
 
     border: 1px solid #000; 
 
     height: 200px; 
 
     width: 200px; 
 
     position:relative; 
 
     margin:10px; 
 
} 
 
#mask { 
 
     position: absolute; 
 
     top:-1px; 
 
     left:1px; 
 
     width:50%; 
 
     height: 1px; 
 
     background-color:#fff; 
 
}

<div id="holder"> 
 
     <div id="mask"></div> 
 
</div> 
 

 

Answer 2

आप बिल्कुल HTML के साथ गड़बड़ नहीं करना चाहते हैं, तो आप यह एक खाली pseudoelement साथ केवल सीएसएस का उपयोग कर कर सकते हैं। तुम अब भी, पृष्ठभूमि रंग जानने की जरूरत निश्चित रूप से (यहाँ सफेद कल्पना करते हुए):

<span class="half-a-border-on-top">Hello world!</span> 

<style> 
.half-a-border-on-top { 
    border-top:1px solid black; 
    position: relative; 
} 
.half-a-border-on-top:after { 
    padding:0;margin:0;display:block;/* probably not really needed? */ 
    content: ""; 
    width:50%; 
    height:1.1px;/* slight higher to work around rounding errors(?) on some zoom levels in some browsers. */ 
    background-color:white; 
    position: absolute; 
    right:0; 
    top:-1px; 
} 
</style> 

परिणाम:

स्निपेट

.half-a-border-on-top { 
 
     border-top:1px solid black; 
 
     position: relative; 
 
    } 
 
    .half-a-border-on-top:after { 
 
     padding:0;margin:0;display:block;/* probably not really needed? */ 
 
     content: ""; 
 
     width:50%; 
 
     height:1.1px; 
 
     background-color:white; 
 
     position: absolute; 
 
     right:0; 
 
     top:-1px; 
 
    }

<span class="half-a-border-on-top">Hello world!</span>

फिडल:

http://jsfiddle.net/vL1qojj8/

Answer 3

देना बताएंगे कि कैसे मैं लियो के कोड को संपादित, पर केंद्र में छोड़ दिया एक आधा सीमा डाल करने के लिए।

इस प्रयास करें:

एचटीएमएल कोड

<div class="half-a-border-on-left">Hello world!</div>

सीएसएस कोड

<style> 
.half-a-border-on-left { 
    border-left: 1px solid black; 
    position: relative; 
    height: 50px; 
    background: red; 
} 
.half-a-border-on-left:after { 
    padding:0; 
    margin:0; 
    content: ""; 
    width: 1px; 
    height: 10px; 
    background-color:white; 
    position: absolute; 
    left:-1px; 
    top: -10px; 
} 
.half-a-border-on-left:before { 
    padding:0; 
    margin:0; 
    content: ""; 
    width: 1px; 
    height: 10px; 
    background-color:white; 
    position: absolute; 
    left: -1px; 
    bottom: -5px; 
} 
</style> 

उन कोड मैं एक आधा सीमा धन्यवाद आप लियो डाल करने के लिए प्रयोग कर रहे हैं,

Answer 4

मैं प्यार करता हूँ हैदराबाद

*** 

.div_1 { 
 
    width: 50px; 
 
    border-bottom: 2px solid black; 
 
} 
 
.div_2 { 
 
    width: max-content; 
 
    margin-bottom: 10px; 
 
}

<div class="div_1" ><div class="div_2">I love Hyderabad</div></div>

---