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

216

Есть ли способ ограничить длину границы. У меня <div>есть нижняя граница, но я хочу добавить границу слева, <div>которая растягивается только на половину пути вверх.

Есть ли способ сделать это без добавления дополнительных элементов на странице?

mcbeav
источник

Ответы:

175

Надеюсь это поможет:

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

СОБР
источник
5
Это все еще кажется лучшим способом сделать это. Он совместим с различными браузерами и прост в обслуживании.
Пим Шааф
1
Есть ли способ сделать это по кругу?
www139
1
примените box-shadow для круга.
Пиюш Дхолария
3
Это может иметь незначительные преимущества кросс-браузерной совместимости по сравнению с древними браузерами, и им легче управлять с помощью JS ... но ни один из этих вопросов не касается исходного вопроса. Однако это добавляет дополнительный элемент к разметке, который, в частности, просит исходный вопрос. Поэтому я не понимаю, почему это принятый ответ на этот вопрос.
Спенсер О'Рейли,
Делая это с: после не потребует дополнительной разметки
Марк
257

Сгенерированный 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: "";объявление необходимо для рендеринга псевдоэлемента)

TrevC
источник
21
Я думаю, что это семантически гораздо лучший вариант, так как он не вводит дополнительные div.
Луи Отто
21
Это должен быть принятый ответ, потому что он предпочитает CSS как единственное средство для стилизации над разметкой.
Лукас
4
Отлично. И это работает как ожидалось с padding & margin тоже.
Нолонар
4
Имейте в виду: вы не можете управлять свойствами псевдоэлементов из JS (на самом деле вы можете, но это будет очень забавно). Так что если вы планируете сделать своеобразный прогресс-бар с этим решением - забудьте. Выберите уже принятый ответ. Во всех остальных случаях этот ответ лучше, это правда.
Сергей Панфилов
2
Совместим ли этот кросс-браузер и / или JS? Я предпочитаю принятый ответ, из-за комментария @ SergeyPanfilov.
Матфей
36

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

user2397120
источник
1
Можете ли вы добавить образец HTML? Как вы думаете, кто использует это с ячейками таблицы, какая-то подсказка?
Питер Краусс
23

С помощью 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()мы можем создавать границы сплошного цвета, а также иметь градиенты. Ниже приведены некоторые примеры границ, созданных с помощью этого метода.

Пример с рамкой, примененной только на одной стороне:

Пример с рамкой, примененной с двух сторон:

Пример с рамкой, примененной со всех сторон:

Скриншот:

Выходное изображение, показывающее границы половинной длины

Мухаммед Усман
источник
Отличная идея сделать это с фоновым изображением, спасибо! Одно дополнение, поскольку оно не очень подробно отражено в ответе: перемещение фонового изображения сверху вниз и слева направо довольно легко, я рекомендую следующую статью: css-tricks.com/almanac/properties/b/background -положение
Андреас Г.
14

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

hr { width: 90%; }

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

Edmhs
источник
Да, здесь "ширина" - это "длина линии HR". Для чего-то вроде border-width используйте размер атрибута HR или CSS height. Для замены границы ячейки в теге TD используйте <td>your content<hr/></td>.
Питер Краусс
8

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

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

Бен
источник
7

Еще один способ сделать это - использовать 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

Даниэль З.
источник
5

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

div.yourdivname:after {
content: ".";
  border-bottom:1px solid grey;
  width:60%;
  display:block;
  margin:0 auto;
}
Джастин Манс
источник
2

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

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

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

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

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

Саймон
источник