Css border-left 50% высота

Я хочу, чтобы левая граница моего div показывала только половину div. То же самое я хотел бы сделать с моей правой границей, но должен быть установлен со дна div до середины div. Как я могу это достичь?

Ответ 1

Хороший вопрос. Это невозможно, используя свойство border.

Единственное, что приходит на ум, если вы можете установить div position в relative, - это использовать абсолютно позиционированную ширину div в 1 пиксель. Не тщательно протестирован, но это должно работать:

<div style='width: 1px; top: 0px; bottom: 50%; left: 0px; 
            background-color: blue; overflow: hidden'>
 &nbsp;
</div>

Вы сделаете то же самое с правой стороны, заменив свойство left на right.

Помните, что окружающая div должна быть position: relative для этого. Я не уверен, будет ли настройка высоты 50% работать последовательно в браузерах - убедитесь, что вы ее протестировали. Возможно, вам придется прибегать к пиксельным мерам, если это не так.

Ответ 2

Этакая-подобного, но иного подхода к @Пекка - х: использовать :after псевдо-селектор, например, так:

HTML-разметка:

<div class="mybox">
    Le content de box.
</div>

CSS:

.mybox {
    position: relative;
    padding: 10px 20px;
    background-color: #EEEEEE;
}

.mybox:after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 25%;
    width: 50%;
    border-bottom: 1px solid #0000CC;
}

... и jsFiddle для хорошей меры.

Ответ 3

2018: Для современных браузеров:

Вы можете использовать border-image с градиентами что-то вроде...

border-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 75%);
border-image-slice: 1;

Демо: https://jsfiddle.net/hz8wp0L0/

Инструмент: Редактор градиентов

Могу ли я использовать: border-image (IE11)

Ответ 4

Вы можете использовать:

line-height:50%; /*(or less, much less)*/
overflow:visible;

Текст виден, но цвет границы будет только в половине размера div.