Выделить цветом часть предыдущего меню

168

04 апреля 2019, 15:40

Подскажите, как можно сделать меню как на скрине. Как сделать изменение цвета при наведении на меню (что бы захватывало скругления предыдущего меню). Спасибо

<div>
    <ul>
        <li>Календарь событий</li>
        <li>Работа с клиентами</li>
        <li>Справочник</li>
    </ul>
</div>

Answer 1

Отрицательные маргины и немного z-index. Решение не особо универсальное, но вполне отвечает на вопрос в какую сторону вам копать.

 & + .navigation__item {
      margin-left: -30px;
 }
 &:nth-child(1) {
      z-index: 3;
 }
 &:nth-child(2) {
      z-index: 2;
 }
 &:nth-child(3) {
      z-index: 1;
 }