Как средствами CSS сделать градиент рамки слева и справа блока?

Question

[Виталий Гусев]

Добрый день!

Помогите тупице, пожалуйста.
Смотрите, есть некое меню. Нужно каждого пункта сделать левую рамку (border-left), которая переходит градиентом сверху вниз. Сначала идёт цвет фона, в середине он становится белым и в конце снова цвет фона. Для последнего элемента такую-же рамку добавляем справа (border-right).

Вот ссылка на JSFiddle:
https://jsfiddle.net/guvijur/vtrskyg5/27/

Я пока думаю сделать это с помощью псевдо элементов before after... Но я как-то уже делал такое не прибегая к псевдо. Забыл(((

Спасибо.

Answer 1

[Ivan Bogachev]

Но я как-то уже делал такое не прибегая к псевдо. Забыл(((

Как вариант можно линейными градиентами все нарисовать, с помощью border-image:

.menu-item {
    border-image: linear-gradient(to bottom, transparent 0%, #fff 50%, transparent 100%) 1;
    border-width: 0 0 0 1px;
    border-style: solid;
}

.menu-item:last-child {
    border-width: 0 1px 0 1px;
}

В общем случае можно градиентами на фоне вообще все, что угодно нарисовать.

Comments

[Виталий Гусев]

Спасибо Вам!