Как сделать меню с окантовкой активного пункта только с 3-х сторон? ⇐ CSS

[Anonymous]

Мое меню имеет две границы: основную вертикальную границу справа от всего меню и границу (сверху, снизу, слева) активного элемента. Правая граница активного элемента должна быть пустой. Основная граница должна прерываться в том же месте, где была прервана правая граница активного элемента. Обратите внимание, что любой из элементов может быть активным, поэтому прерывание основной границы не может быть жестко запрограммировано

Код: Выделить всё

.container {
border-right: 1px solid;
width: 200px;
padding-top: 20px;
padding-bottom: 20px;
}

.item {
padding: 10px;
}

.active {
border-top: 1px solid;
border-bottom: 1px solid;
border-left: 1px solid;
}

Код: Выделить всё

Test1

Test2

Test3

[img]https: //i.sstatic.net/4a6CvGxL.png[/img]


Подробнее здесь: https://stackoverflow.com/questions/785 ... om-3-sides