Будь-який спосіб обмежити довжину кордону?

Чи є спосіб обмежити довжину кордону. У мене є <div>нижня межа, але я хочу додати межу ліворуч від тієї, <div>що проходить лише половину шляху вгору.

Чи можна зробити це без додавання додаткових елементів на сторінку?

Сподіваюсь, це допомагає:

#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>

Вміст, створений 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;
}

<div>Lorem Ipsum</div>

(зауважте - content: "";декларація необхідна для того, щоб псевдоелемент відображався)

На :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>

Завдяки властивостям 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>

Знімок екрана:

для горизонтальних ліній можна використовувати тег hr:

hr { width: 90%; }

але обмежити висоту кордону неможливо. лише висота елемента.

Межі визначаються лише на стороні, а не на частках сторони. Отже, ні, ви не можете цього зробити.

Крім того, новий елемент також не буде межею, він лише імітує поведінку, яку ви хочете - але все одно це буде елементом.

Іншим способом цього є використання зображення рамки в поєднанні з лінійним градієнтом.

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+

Хром: усі

Firefox: 15+

Для кращої підтримки також додайте префікси постачальника.

каніуси-межі-зображення

Це фокус CSS, а не формальне рішення. Я залишаю код з періодом чорного кольору, тому що він допомагає мені розмістити елемент. Потім розфарбуйте свій вміст (колір: білий) та (margin-top: -5px або близько того), щоб не було періоду.

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

Ще одне рішення - ви можете використовувати фонове зображення, щоб імітувати вигляд лівої межі

1. Створіть лівий кордон стиль, який вам потрібен як графічний
2. Розташуйте його в лівій частині лівого колу вашого дива (зробіть його досить довгим для обробки приблизно двох збільшення розміру тексту для старих браузерів)
3. Встановіть вертикальне положення на 50% від верхньої частини вашої ділки.

Вам може знадобитися налаштувати IE (як зазвичай), але варто зняти, якщо це дизайн, який ви збираєтеся.

• Я взагалі проти використання зображень для чогось, що CSS по суті надає, але іноді, якщо дизайн потребує цього, іншого шляху не обійти.

Ви можете визначити лише одну межу з кожного боку. Вам доведеться додати додатковий елемент для цього!