Иногда бывает нужно реализовать тени, отличающиеся от стандартных box-shadow, без применения картинок.

Например, тени, наклонённые в разные стороны.

Сделать это с помощью box-shadow невозможно. Поэтому нужно использовать более сложный приём:

• c помощью псевдоэлементов before и after создаём два блока с обычными тенями;
• наклоняем эти блоки с помощью rotate;
• задаём им отрицательный z-index.

Это переместит блоки с тенями под родительский контейнер так, что наружу будут выглядывать только кусочки теней.