Как правильно реализовать табы по образцу?

Question

[Andrey Dontsov]

Ребят, подскажите как сделать табы как на скрине, со скошенным углом?
Проблема не только в том, чтобы на css сделать срезанный угол правильно (это первый вопрос)
Здесь две вкладки, у одной класс activ, допустим как-то можно стилями задать правый скос на первой (левой) вкладке, но при переключении на правую вкладку как у activ сменить стиль на скос слева?
Буду признателен если кто-то подскажет или приведет пример кода.. спасибо!

Answer 1

[Андрей Б.]

Можно так

По поводу самих уголков, есть исчерпывающая статья на хабре

Comments

[Andrey Dontsov]

Спасибо, Андрей!

Answer 2

[Евгений Петров]

Как верстать блоки непрямоугольной формы?
Как сделать блок в виде параллелограмм?

Во избежание искажений контента можно делать скос в :before и :after.

Comments

[Andrey Dontsov]

Евгений, спасибо!