relative и absolute

Создайте веб-страницу, показанную на рис. 1. Вид в браузере IE может несколько отличаться.

Рис. 1

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Фотография коктейля</title> <style> body { background: #f7f6f2; } .cocktail { display: inline-block; padding: 12px; margin: 0; position: relative; overflow: hidden; } .cocktail::after, .cocktail::before { content: ''; position: absolute; z-index: 2; width: 70px; height: 70px; left: -40px; bottom: -40px; transform: rotate(45deg); box-shadow: 0 0 10px rgba(0,0,0,.5); outline: #c2b59d dashed 1px; outline-offset: -3px; background: #f7f6f2; } .cocktail::after { left: auto; right: -40px; top: -40px; } .cocktail img { display: block; padding: 4px; background: #dad6cf; border: 2px solid #c2b59d; } </style> </head> <body> <figure class="cocktail"> <img src="image/cocktail.jpg" width="200" height="200" alt="Коктейль"> </figure> <figure class="cocktail"> <img src="image/cocktail-2.jpg" width="200" height="200" alt="Коктейль"> </figure> </body> </html>
Как научиться разрабатывать сайты