Как сделать разноцветный border у Html блока?

Question

Как сделать разноцветный border у Html блока?

Евгений Иванов Ученик (46), закрыт 4 года назад

Например у блока div задано свойство border-bottom 1px solid color # 000, а нужно чтобы он был и красный и черный?

Answer 1

Elepsis Eclipse Гений (64067) 4 года назад

border-image
——————— пример ———————

<div class="bubu"></div>

.bubu {
  width: 200px;
  height: 100px;
  border: 50px solid;
  border-image: linear-gradient(-45deg, #c00 50%, #000 50% 100%) 50;
}

———————————————————————————————

Играйся с числами и цветами) Там вместо градиента может быть и обычная картинка)

Евгений ИвановУченик (46) 4 года назад

Огромное спасибо. А не подскажешь, вроде ещё как-то через content: можно? Идея в том чтобы ничего не вырезать из psd и поддержка в старых браузерах, чтобы не копаться в них еще из-за css 3. linear-gradien по-моему, css 3 свойство...

content - это свойство псевдоэлемента, непосредственно им ничего не добиться, но через сам псевдоэлемент можно извернуться: .bubu:after { /* этих стилей должно быть достаточно в общем случае для геометрии одной границы. Если нет (зависит от специфики контейнера и содержимого), то придётся поиграть другими свойствами */ content: "", display: block; height: 1px; background: red; /* трёхсекционная */ border-style: solid; border-color: black; border-width: 0 20%; /* пунктирная */ border-top: 1px dashed black; /* точки */ border-top: 1px dotted black; } Будет работать и в старых браузерах, но не сказать, что возможности безграничны.

Answer 2

Илья Ш Просветленный (20166) 4 года назад

https://jsfiddle.net/xvqm7erg/ http://jsfiddle.net/z5xAx/