أي طريقة للحد من طول الحدود؟

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>

Answer 2

يمكن لمحتوى CSS الذي تم إنشاؤه حل هذا من أجلك:

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;
}

(لاحظ ال content: ""; الإعلان ضروري من أجل تقديم العناصر الزائفة)

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>

Answer 4

مع خصائص CSS ، يمكننا فقط التحكم في سمك الحدود ؛ لا طول.

ومع ذلك يمكننا تقليد تأثير الحدود والسيطرة عليها width و height كما نريد مع بعض الطرق الأخرى.

مع CSS (التدرج الخطي):

يمكننا ان نستخدم linear-gradient() لإنشاء صورة (صور) خلفية والتحكم في حجمها وموضعها باستخدام CSS بحيث تبدو كحدود. حيث يمكننا تطبيق صور خلفية متعددة على عنصر ما ، يمكننا استخدام هذه الميزة لإنشاء حدود متعددة مثل الصور والتطبيق على جوانب مختلفة من العنصر. يمكننا أيضًا تغطية المنطقة المتبقية المتوفرة مع بعض الألوان الصلبة أو التدرج أو الخلفية.

مطلوب HTML:

كل ما نحتاجه هو عنصر واحد فقط (ربما وجود بعض الفئة).

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

خطوات:

1. إنشاء صورة (صور) الخلفية مع linear-gradient().
2. يستخدم background-size لضبط width / height من الصور (الصور) التي تم إنشاؤها أعلاه بحيث تبدو مثل الحدود.
3. يستخدم background-position لضبط الموضع (مثل left, right, left bottom وما إلى ذلك) من الحدود (ق) التي تم إنشاؤها أعلاه.

CSS اللازمة:

.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 { width: 90%; }

ولكن من غير الممكن الحد من ارتفاع الحدود. ارتفاع العنصر فقط.

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/

---

دعم المتصفح: أي: 11+

Chrome: الكل

Firefox: 15+

للحصول على دعم أفضل أيضًا ، أضف بادئات البائعين.

caniuse صورة الحدود

Answer 8

هذه خدعة CSS ، وليس حلًا رسميًا. أترك الرمز مع الفترة الأسود لأنه يساعدني في وضع العنصر. بعد ذلك ، قم بتلوين المحتوى الخاص بك (اللون: أبيض) و (الهامش: -5 بكسل أو نحو ذلك) لجعله كما لو أن الفترة ليست موجودة.

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

Answer 9

حل آخر هو أنه يمكنك استخدام صورة خلفية لتقليد مظهر الحدود اليسرى

1. قم بإنشاء نمط اليسار الحدودي الذي تحتاجه كرسومات
2. ضعه على يسار Div الخاص بك (اجعله طويلاً بما يكفي للتعامل مع زيادة حجم النص تقريبًا للمتصفحات القديمة)
3. اضبط الموضع العمودي 50 ٪ من أعلى Div الخاص بك.

قد تحتاج إلى تعديل IE (كما هو معتاد) ، لكن الأمر يستحق اللقطة إذا كان هذا هو التصميم الذي ستذهب إليه.

• أنا عمومًا ضد استخدام الصور لشيء يوفره CSS بطبيعته ، ولكن في بعض الأحيان إذا كان التصميم يحتاج إليه ، فلا توجد طريقة أخرى حولها.

Answer 10

يمكنك تحديد حدود واحدة لكل جانب فقط. سيكون عليك إضافة عنصر إضافي لذلك!