Любой способ ограничить длину границы?

Есть ли способ ограничить длину границы. У меня <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%; }

но невозможно ограничить высоту границы. только высота элемента.

Границы определяются только для одной стороны, а не в виде дробей стороны. Так что нет, ты не можешь этого сделать.

Кроме того, новый элемент также не будет границей, он будет только имитировать поведение, которое вы хотите - но он все равно будет элементом.

Еще один способ сделать это - использовать border-image в сочетании с линейным градиентом.

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+

Для лучшей поддержки также добавьте префиксы поставщиков.

caniuse border-image

Это трюк CSS, а не формальное решение. Я оставляю код с черной точкой, потому что это помогает мне позиционировать элемент. Затем раскрасьте ваш контент (цвет: белый) и (margin-top: -5px или около того), чтобы сделать его таким, как если бы периода не было.

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

Другое решение - вы можете использовать фоновое изображение, чтобы имитировать вид левой границы.

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

Возможно, вам придется настроить IE (как обычно), но стоит попробовать, если вы планируете именно этот дизайн.

• Я вообще против использования изображений для чего-то, что присуще CSS, но иногда, если дизайн нуждается в этом, другого пути нет.

Вы можете определить только одну границу для каждой стороны. Вы должны были бы добавить дополнительный элемент для этого!