smargelov
@smargelov
Верстальщик

Загнутые уголки через CSS3 и background родительских блоков

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

При этом неважно, какое количество родительских блоков имеют фон отличный от прозрачного. Тень от псевдоэлементов :after и :before всё равно попадает под них. Единственный фон, над котором они оказываются, это фон элемента body.

Вот тут постарался объяснить проблему наглядно (не оращайте внимания на возможные косяки в коде, это просто быстрый набросок для примера). Всё работает нормально несмотря на фон у body и прозрачный фон у .block2. Но стоит раскомментировать 7 или 8 строчку, как тень от превдоэлементов исчезает. С тенью самого .box всё в порядке.

Помогите решить этот вопрос. Уже 4 часа капаю в разных направлениях.

Заранее благодарен.
  • Вопрос задан
  • 5861 просмотр
Пригласить эксперта
Ответы на вопрос 1
Надеюсь это то, что Вы имели ввиду ссылка
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы