सीमा की लंबाई को सीमित करने का कोई तरीका?

Question

क्या सीमा की लंबाई को सीमित करने का कोई तरीका है। मेरे पास एक <div>निचला बॉर्डर है, लेकिन मैं उस बायीं ओर एक बॉर्डर जोड़ना चाहता हूं <div>जो केवल आधे रास्ते तक फैला है।

क्या पेज पर अतिरिक्त तत्वों को जोड़े बिना ऐसा करने का कोई तरीका है?

Answer 1

उम्मीद है की यह मदद करेगा:

#mainDiv {
  height: 100px;
  width: 80px;
  position: relative;
  border-bottom: 2px solid #f51c40;
  background: #3beadc;
}

#borderLeft {
  border-left: 2px solid #f51c40;
  position: absolute;
  top: 50%;
  bottom: 0;
}

<div id="mainDiv">
  <div id="borderLeft"></div>
</div>

Comments

यह अभी भी इसे करने का सबसे अच्छा तरीका लगता है। यह क्रॉस ब्राउज़र संगत और रखरखाव में आसान है।

— पिम शेफ

वहाँ एक सर्कल पर ऐसा करने का एक तरीका है?

— www139

सर्कल के लिए बॉक्स-छाया लागू करें।

— पीयूष ढोलरिया

यह प्राचीन ब्राउज़रों पर सीमांत क्रॉस ब्राउज़र संगतता लाभ हो सकता है और जेएस के माध्यम से नियंत्रित करना आसान है ... लेकिन इनमें से कोई भी मूल प्रश्न की चिंता नहीं है। हालाँकि इससे मार्कअप में एक अतिरिक्त तत्व जुड़ जाता है जो मूल प्रश्न विशेष रूप से बचने के लिए कहता है। इसलिए मुझे समझ नहीं आ रहा है कि इस सवाल का स्वीकृत जवाब क्यों है।

— स्पेंसर ओ'रिली ने

इसके साथ ऐसा करना: के बाद किसी भी अतिरिक्त मार्कअप की आवश्यकता नहीं होगी

— मार्क

Answer 2

सीएसएस उत्पन्न सामग्री आपके लिए इसे हल कर सकती है:

div {
  position: relative;
}


/* Main div for border to extend to 50% from bottom left corner */

div:after {
  content: "";
  background: black;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
  width: 1px;
}

<div>Lorem Ipsum</div>

(ध्यान दें - content: "";घोषणा प्रस्तुत करने के लिए छद्म तत्व के लिए आवश्यक है)

Comments

मुझे लगता है कि यह शब्दार्थ बहुत बेहतर विकल्प है, क्योंकि यह अतिरिक्त div का परिचय नहीं देता है।

— लुई ओट्टो

यह स्वीकृत उत्तर होना चाहिए क्योंकि यह सीएसएस के पक्ष में है क्योंकि मार्कअप पर स्टाइल के लिए एकमात्र साधन है।

— लुकास

उत्तम। और यह पैडिंग और मार्जिन के साथ भी अपेक्षित है।

— नोलोनार

ध्यान रखें: आप जेएस से छद्म तत्वों के गुणों का प्रबंधन नहीं कर सकते हैं (वास्तव में आप कर सकते हैं, लेकिन यह बहुत हैकिया होगा)। तो अगर आप इस समाधान के साथ एक प्रकार की प्रगति-बार बनाने की योजना बना रहे हैं - भूल जाओ। पहले से स्वीकृत उत्तर चुनें। अन्य सभी मामलों में यह उत्तर बेहतर है, यह सच है।

— सर्गेई पैनफिलोव

क्या यह क्रॉस-ब्राउज़र और / या JS संगत है? मैं @ सर्गेईपैनफिलोव की टिप्पणी के कारण स्वीकार किए गए उत्तर को पसंद करता हूं।

— मथायस

Answer 3

:afterचट्टानों :)

यदि आप थोड़ा सा खेलते हैं, तो आप अपने रिसाइज्ड बॉर्डर एलिमेंट को भी सेंटर्ड दिखाने के लिए सेट कर सकते हैं या केवल तब ही दिखाई दे सकते हैं जब इसके आगे एक और एलिमेंट हो (जैसे मेन्यू में)। यहाँ एक मेनू के साथ एक उदाहरण है:

#menu > ul > li {
    position: relative;
    float: left;
    padding: 0 10px;
}

#menu > ul > li + li:after {
    content:"";
    background: #ccc;
    position: absolute;
    bottom: 25%;
    left: 0;
    height: 50%;
    width: 1px;
}

#menu > ul > li {
  position: relative;
  float: left;
  padding: 0 10px;
  list-style: none;
}
#menu > ul > li + li:after {
  content: "";
  background: #ccc;
  position: absolute;
  bottom: 25%;
  left: 0;
  height: 50%;
  width: 1px;
}

<div id="menu">
  <ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
  </ul>
</div>

Comments

क्या आप एक HTML नमूना जोड़ सकते हैं? आप इसे टेबल सेल, कुछ सुराग के साथ उपयोग करने के लिए कैसे सोचते हैं?

— पीटर क्रूस

Answer 4

CSS गुणों के साथ, हम केवल सीमा की मोटाई को नियंत्रित कर सकते हैं; लंबाई नहीं।

हालाँकि हम सीमा के प्रभाव की नकल कर सकते हैं और इसे नियंत्रित कर सकते हैं widthऔर heightजैसा कि हम कुछ अन्य तरीकों से चाहते हैं।

सीएसएस (रैखिक ढाल) के साथ:

हम linear-gradient()एक पृष्ठभूमि छवि बनाने के लिए उपयोग कर सकते हैं और सीएसएस के साथ इसके आकार और स्थिति को नियंत्रित कर सकते हैं ताकि यह एक सीमा जैसा दिखे। जैसा कि हम एक तत्व के लिए कई पृष्ठभूमि छवियों को लागू कर सकते हैं, हम इस सुविधा का उपयोग छवियों की तरह कई सीमा बनाने और तत्व के विभिन्न पक्षों पर लागू कर सकते हैं। हम शेष उपलब्ध क्षेत्र को कुछ ठोस रंग, ढाल या पृष्ठभूमि छवि के साथ भी कवर कर सकते हैं।

आवश्यक HTML:

हमें केवल एक तत्व की आवश्यकता है (संभवतः कुछ वर्ग)।

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

कदम:

1. के साथ पृष्ठभूमि छवि बनाएं linear-gradient()।
2. उपयोग background-sizeसमायोजित करने के लिए width/ heightऊपर बनाया छवि (ओं) इतना है कि यह एक सीमा की तरह लग रहा है।
3. का प्रयोग करें background-positionस्थिति (जैसे समायोजित करने के लिए left, right, left bottomबनाया सीमा से ऊपर (ओं) का आदि)।

आवश्यक सीएसएस:

.box {
  background-image: linear-gradient(purple, purple),
                    // Above css will create background image that looks like a border.
                    linear-gradient(steelblue, steelblue);
                    // This will create background image for the container.

  background-repeat: no-repeat;

  /* First sizing pair (4px 50%) will define the size of the border i.e border
     will be of having 4px width and 50% height. */
  /* 2nd pair will define the size of stretched background image. */
  background-size: 4px 50%, calc(100% - 4px) 100%;

  /* Similar to size, first pair will define the position of the border
     and 2nd one for the container background */
  background-position: left bottom, 4px 0;
}

उदाहरण:

साथ linear-gradient()हम ठोस रंग की सीमाओं के साथ-साथ होने ढ़ाल बना सकते हैं। नीचे इस पद्धति के साथ बनाई गई सीमा के कुछ उदाहरण दिए गए हैं।

केवल एक तरफ लागू सीमा के साथ उदाहरण:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, calc(100% - 4px) 100%;
  background-position: left bottom, 4px 0;

  height: 160px;
  width: 160px;
  margin: 20px;
}
.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(steelblue, steelblue);
}

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

  <div class="box gradient-border"></div>
</div>

दो पक्षों पर लागू सीमा के साथ उदाहरण:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, 4px 50%, calc(100% - 8px) 100%;
  background-position: left bottom, right top, 4px 0;
  
  height: 160px;
  width: 160px;
  margin: 20px;
}

.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(purple, red),
                    linear-gradient(steelblue, steelblue);
}

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

  <div class="box gradient-border"></div>
</div>

सभी पक्षों पर लागू सीमा के साथ उदाहरण:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, 50% 4px, 4px 50%, 50% 4px, calc(100% - 8px) calc(100% - 8px);
  background-position: left bottom, left bottom, right top, right top, 4px 4px;
  
  height: 160px;
  width: 160px;
  margin: 20px;
}

.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(to right, purple, red),
                    linear-gradient(to bottom, purple, red),
                    linear-gradient(to left, purple, red),
                    linear-gradient(steelblue, steelblue);
}

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

  <div class="box gradient-border"></div>
</div>

स्क्रीनशॉट:

Answer 5

क्षैतिज लाइनों के लिए आप hr टैग का उपयोग कर सकते हैं:

hr { width: 90%; }

लेकिन इसकी सीमा की ऊंचाई को सीमित करना संभव नहीं है। केवल तत्व ऊंचाई।

Comments

हां, यहां "चौड़ाई" "एचआर लाइन की लंबाई" है। सीमा-चौड़ाई जैसी किसी चीज़ के लिए HR विशेषता आकार, या CSS का उपयोग करें height। एक टीडी टैग उपयोग में सेल बॉर्डर को बदलने के लिए <td>your content<hr/></td>।

— पीटर क्रूस

Answer 6

सीमाओं को प्रति पक्ष में ही परिभाषित किया जाता है, किसी पक्ष के अंशों में नहीं। तो, नहीं, आप ऐसा नहीं कर सकते।

इसके अलावा, एक नया तत्व एक सीमा भी नहीं होगा, यह केवल उस व्यवहार की नकल करेगा जो आप चाहते हैं - लेकिन यह अभी भी एक तत्व होगा।

Answer 7

ऐसा करने का एक और तरीका एक रेखीय-ढाल के साथ संयोजन में सीमा-छवि का उपयोग कर रहा है।

div {
  width: 100px;
  height: 75px;
  background-color: green;
  background-clip: content-box; /* so that the background color is not below the border */
  
  border-left: 5px solid black;
  border-image: linear-gradient(to top, #000 50%, rgba(0,0,0,0) 50%); /* to top - at 50% transparent */
  border-image-slice: 1;
}

<div></div>

jsfiddle: https://jsfiddle.net/u7zq0amc/1/

---

ब्राउज़र का समर्थन: IE: 11+

क्रोम: सभी

फ़ायरफ़ॉक्स: 15+

एक बेहतर समर्थन के लिए वेंडर उपसर्ग भी जोड़ें।

caniuse सीमा-छवि

Answer 8

यह एक सीएसएस ट्रिक है, औपचारिक समाधान नहीं। मैं कोड को काले रंग की अवधि के साथ छोड़ देता हूं क्योंकि यह मुझे तत्व को स्थिति में लाने में मदद करता है। बाद में, अपनी सामग्री (रंग: सफेद) और (मार्जिन-टॉप: -5 पीएक्स या तो) को रंग दें ताकि यह सुनिश्चित हो सके कि अवधि नहीं है।

div.yourdivname:after {
content: ".";
  border-bottom:1px solid grey;
  width:60%;
  display:block;
  margin:0 auto;
}

Answer 9

एक और उपाय यह है कि आप बाईं सीमा के रूप की नकल करने के लिए एक पृष्ठभूमि छवि का उपयोग कर सकते हैं

1. एक ग्राफिक के रूप में आपके द्वारा आवश्यक बॉर्डर-लेफ्ट स्टाइल बनाएं
2. अपनी डिव के बहुत बाईं ओर स्थित करें (पुराने ब्राउज़रों के लिए मोटे तौर पर दो पाठ आकार में वृद्धि करने के लिए इसे लंबे समय तक बनाएं)
3. अपने div के शीर्ष से 50% ऊर्ध्वाधर स्थिति सेट करें।

आपको IE के लिए (सामान्य रूप से) के लिए tweak करने की आवश्यकता हो सकती है, लेकिन यह एक शॉट के लायक है अगर यह वह डिज़ाइन है जिसके लिए आप जा रहे हैं।

• मैं आम तौर पर कुछ ऐसी चीज़ों के लिए छवियों का उपयोग करने के खिलाफ हूं जो सीएसएस स्वाभाविक रूप से प्रदान करता है, लेकिन कभी-कभी अगर डिजाइन को इसकी आवश्यकता होती है, तो इसके लिए कोई अन्य तरीका नहीं है।

Answer 10

आप प्रति साइड एक सीमा को परिभाषित कर सकते हैं। आपको इसके लिए एक अतिरिक्त तत्व जोड़ना होगा!