Рамка з обертанням
Створіть сторінку, як показано на малюнку 1. Рамка повинна коректно відображатися у всіх сучасних браузерах.
Мал. 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Рамка з обертанням</title>
<style>
.frame {
position: relative; /* Відносне позиціонування */
display: inline-block; /* Ширина блоку дорівнює ширині зображення */
margin: 10px; /* Встановлюємо простір навколо блоку */
padding: 4px; /* Товщина внутрішньої рамки */
outline: 1px solid #fff; /* Біла рамка навколо блоку */
}
.frame img {
display: block; /* Видаляємо відступ під зображенням */
}
.frame::after {
content: '';
position: absolute; /* Абсолютне позиціонування */
left: -2px; top: -2px; /* Зсуваємо вліво і вгору */
width: 100%; height: 100%; /* Ширина та висота співпадає з батьківським елементом */
z-index: -1; /* Розміщуємо під зображенням */
transform: rotate(-6deg); /* Обертаємо рамку */
}
.frame, .frame::after {
background: #dad6cf; /* Колір фону */
border: 2px solid #c2b59d; /* Параметри рамки */
}
</style>
</head>
<body>
<div class="frame"><img src="images/venera.png" alt=""></div>
</body>
</html>