Любой способ ограничить длину границы?
Вопрос
Есть ли способ ограничить длину границы. у меня есть <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>
С свойствами CSS мы можем контролировать только толщину границы; не длина.
Однако мы можем имитировать эффект границы и контролировать его width
и height
Как мы хотим с некоторыми другими способами.
С CSS (линейный градиент):
Мы можем использовать 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>
Пример с границей, примененной с двух сторон:
.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 Tag:
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/
Поддержка браузера: т.е. 11+
Хром: все
Firefox: 15+
Для лучшей поддержки также добавьте префиксы поставщиков.
Это трюк CSS, а не формальное решение. Я оставляю код с периодом черного, потому что он помогает мне позиционировать элемент. После этого раскрасьте свой контент (цвет: белый) и (маржа-вершина: -5px или около того), чтобы сделать его так, как будто этого периода нет.
div.yourdivname:after {
content: ".";
border-bottom:1px solid grey;
width:60%;
display:block;
margin:0 auto;
}
Другое решение - вы можете использовать фоновое изображение, чтобы имитировать внешний вид левой границы
- Создайте левый стиль, который вам требуется в качестве графики
- Поместите его в самый левый от вашего Div (сделайте его достаточно длинным, чтобы обработать примерно два увеличения размера текста для более старых браузеров)
- Установите вертикальную позицию на 50% с вершины вашего Div.
Возможно, вам понадобится настроить для IE (как обычно), но это стоит шансов, если это дизайн, на который вы собираетесь.
- Я, как правило, против использования изображений для чего -то, что CSS по своей природе обеспечивает, но иногда, если дизайн нуждается в этом, нет никакого другого пути вокруг него.
Вы можете определить только одну границу на сторону. Вы должны были бы добавить дополнительный элемент для этого!