Есть ли способ ограничить длину границы. У меня есть <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;
}
(примечание - объявление 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>для горизонтальных линий вы можете использовать тег hr:
hr { width: 90%; }
но невозможно ограничить высоту границы. только высота элемента.
С свойствами CSS мы можем контролировать толщину границы; не длина.
Однако мы можем имитировать эффект границы и управлять его width и height, как мы хотим, с помощью других способов.
Мы можем использовать linear-gradient() для создания фонового изображения (ов) и управления его размером и позицией с помощью CSS, чтобы он выглядел как граница. Поскольку мы можем применить несколько фоновых изображений к элементу, мы можем использовать эту функцию для создания нескольких изображений, похожих на границу, и применять их по разные стороны элемента. Мы также можем покрыть оставшуюся свободную область с определенным сплошным цветом, градиентом или фоновым изображением.
Требуемый HTML:
Все, что нам нужно, это только один элемент (возможно, имеющий некоторый класс).
<div class="box"></div>
Шаги:
linear-gradient().background-size для настройки width/height выше созданного изображения (ов), чтобы оно выглядело как граница.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>Границы определяются только на стороне, а не в долях стороны. Итак, нет, вы не можете этого сделать.
Кроме того, новый элемент также не будет границей, он будет только имитировать поведение, которое вы хотите, но оно все равно будет элементом.
Это трюк CSS, а не формальное решение. Я оставляю код с черным периодом, потому что он помогает мне позиционировать элемент. Затем покрасьте свой контент (цвет: белый) и (margin-top: -5px или около того), чтобы сделать так, как будто период не существует.
div.yourdivname:after {
content: ".";
border-bottom:1px solid grey;
width:60%;
display:block;
margin:0 auto;
}
Другое решение - вы можете использовать фоновое изображение, чтобы имитировать внешний вид левой границы.
Вам может потребоваться настроить IE (как обычно), но это стоит того, если вы планируете дизайн.
Вы можете определить только одну границу на стороне. Вам нужно будет добавить дополнительный элемент для этого!
Другой способ сделать это - использовать 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>