В данном уроке мы разберемся, как создавать эффект подсунутых уголков для блоков. Такое оформление материалов отлично подойдет для проектов с дизайном старых фотоальбомов. Разметка HTML Нам потребуется два элемента, потому что для эффекта используется четыре угла, создаваемые с помощью псевдо-элементов. 1 <div class="tucked-corners-top"> 2 <div class="tucked-corners-bottom"> 3 <!-- Содержание располагается здесь --> 4 </div> 5 </div> CSS Селектор [class*='tucked-corners-'] предназначен для выбора элементов, которые имеют строку tucked-corners- в имени класса. 01 .tucked-corners-top { 02 position: relative; 03 width: 500px; min-height: 200px; 04 margin: 100px auto; padding: 20px; 05 background-color: #fff; /* Обратная совместимость */ 06 background: linear-gradient(45deg, transparent 10px, #fff 10px), 07 linear-gradient(135deg, transparent 10px, #fff 10px), 08 linear-gradient(225deg, transparent 10px, #fff 10px), 09 linear-gradient(315deg, transparent 10px, #fff 10px); 10 background-position: bottom left, bottom right, top right, top left; 11 background-size: 50% 50%; 12 background-repeat: no-repeat; 13 box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5); 14 } 15 16 [class*='tucked-corners-']::before, /* Все четыре угла */ 17 [class*='tucked-corners-']::after { 18 content: ''; 19 position: absolute; 20 height: 20px; width: 80px; 21 box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5); 22 box-shadow: none\9; /* Не выводить в IE9 */ 23 } 24 25 .tucked-corners-top::before, /* Верхний левый и верхний правый */ 26 .tucked-corners-top::after { 27 top: -10px; 28 } 29 30 .tucked-corners-bottom::before, /* Нижний левый и нижний правый */ 31 .tucked-corners-bottom::after { 32 bottom: -10px; 33 } 34 35 .tucked-corners-top::before, /* Верхний левый и нижний левый */ 36 .tucked-corners-bottom::before { 37 left: -42px; 38 } 39 40 .tucked-corners-top::after, /* Верхний правый и нижний правый */ 41 .tucked-corners-bottom::after { 42 right: -42px; 43 } 44 45 .tucked-corners-top::before { /* Верхний левый */ 46 transform: rotate(-45deg); 47 } 48 49 .tucked-corners-top::after { /* Верхний правый */ 50 transform: rotate(45deg); 51 } 52 53 .tucked-corners-bottom::before { /* Нижний левый */ 54 transform: rotate(-135deg); 55 } 56 57 .tucked-corners-bottom::after { /* Нижний правый */ 58 transform: rotate(135deg); 59 } Случай IE9 IE9 не поддерживает градиенты CSS3, но он поддерживает свойство box-shadow. В итоге получается следующее: Изображение в IE9 Мы просто отключаем тени в IE9, так что эффект в данном браузере не будет выводиться: 1 [class*='tucked-corners-']::before, 2 [class*='tucked-corners-']::after { 3 box-shadow: none\9; /* Не выводить в IE9 */ 4 }