Как сделать такой бордер?

Question

[Сергей]

Как сделать такой бордер с двумя цветами?

Answer 1

[Ivan Bogachev]

Подобные бордеры легко рисуются линейными градиентами на одном элементе (пример).

Comments

[Odisseya]

В этом случае можно еще проще, через border-image-source: linear-gradient()
Пример
---
Кстати, спасибо за интересные хабра-посты про svg-магию.

[Ivan Bogachev]

Odisseya, Да, в этом случае и правда с border-image-source еще проще будет.

Кстати, спасибо за интересные хабра-посты про svg-магию.

Приятно слышать. Рад, что кому-то они интересны.

Answer 2

[maxpsyhos]

Бордер - никак.
Можно сделать :before и :after чёрного и жёлтого цвета, которые будут под контейнером с текстом, и немного выпирать за его границы.

Answer 3

[Максим]

https://codepen.io/topicstarter/pen/ZjWoWQ?editors=1100 ну можно так - хотя и по другому можно тоже
https://codepen.io/topicstarter/pen/OwNZzY второй вариант - но оба варианта надо допиливать

Answer 4

[Александр Комарчук]

Самое современное и гибкое решение, сделать в формате SVG.

Если будут вопросы, пишите на почту.