Следует помнить, что к каждому элементу можно добавить только один ::before и только один ::after. В большинстве ситуаций двух псевдоэлементов вполне достаточно, хотя в сложных случаях их потребуется больше. При этом можно воспользоваться таким трюком — внутрь нашего элемента вставить пустой <div> и к нему уже добавить ещё псевдоэлементы.
Модифицируем повёрнутую рамку, добавив к ней ещё и уголки (рис. 1).
Рис. 1. Рамка с уголками
Два уголка плюс рамка — итого получается три псевдоэлемента. ::after и ::before «навесим» на элемент <figure>, а ещё один добавим к <div> с классом border внутри <figure>, как показано в примере 1.
Пример 1. Несколько псевдоэлементов
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Рамка</title>
<style>
body { background: #f7f6f2; }
figure {
display: inline-block; /* Строчно-блочный элемент */
padding: 12px; /* Расстояние от рамки до уголка */
position: relative; /* Относительное позиционирование */
overflow: hidden; /* Обрезаем лишнее */
}
figure::before, figure::after {
content: ''; /* Выводим уголки */
position: absolute; /* Абсолютное позиционирование */
z-index: 2; /* Уголки поверх */
width: 70px; height: 70px; /* Размеры уголка */
left: -35px; bottom: -35px; /* Левый нижний уголок */
transform: rotate(45deg); /* Поворачиваем уголок */
box-shadow: 0 0 10px rgba(0,0,0,.5); /* Параметры тени */
outline: #c2b59d dashed 1px; /* Пунктирная линия */
outline-offset: -3px; /* Расстояние от края до линии */
background: #f7f6f2; /* Цвет фона */
}
figure::after {
/* Правый верхний уголок */
left: auto; right: -35px; top: -35px;
}
.border {
position: relative; /* Относительное позиционирование */
}
.border, .border::after {
padding: 4px; /* Толщина внутренней рамки */
background: #dad6cf; /* Цвет внутренней рамки */
border: 2px solid #c2b59d; /* Параметры рамки */
box-sizing: border-box; /* Не учитываем padding */
}
.border img { display: block; }
.border::after {
content: ''; /* Выводим рамку */
position: absolute; /* Абсолютное позиционирование */
left: 0; top: 0; /* Положение */
width: 100%; height: 100%; /* Размеры */
z-index: -1; /* Опускаем вниз */
transform: rotate(-7deg); /* Поворачиваем */
}
</style>
</head>
<body>
<figure>
<div class="border">
<img src="image/b-52.jpg" alt="Б-52" width="150" height="150">
</div>
</figure>
</body>
</html>
Уголки сделаем с помощью квадратов, фон которых совпадает с фоном веб-страницы. Один уголок располагается в правом верхнем углу, а другой — в левом нижнем. Затем уголки поворачиваются на 45 градусов, а лишние части удаляются через свойство overflow со значением hidden.