Одна из самых популярных фигур в мире - это форма сердца, и в этой задаче вы создадите ее, используя чистый CSS. Но для начала вам нужно познакомиться с псевдоэлементами ::before и ::after. Эти псевдоэлементы используются для добавления чего-либо до(before) или после(after) выбранного элемента.
В следующем примере псевдоэлемент ::before используется для добавления прямоугольника к элементу с классом heart:
.heart::before {
content: "";
background-color: yellow;
border-radius: 25%;
position: absolute;
height: 50px;
width: 70px;
top: -50px;
left: 5px;
}
Для правильного функционирования псевдоэлементов ::before и ::after они должны иметь определенное свойство content. Это свойство обычно используется для добавления к выбранному элементу таких вещей, как фотография или текст. Когда псевдоэлементы ::before и ::after используются для создания фигур, свойство content по-прежнему необходимо, но для него установлена пустая строка.
В приведенном выше примере элемент с классом heart имеет псевдоэлемент ::before, который создает желтый прямоугольник с высотой и шириной 50 пикселей и 70 пикселей соответственно. Этот прямоугольник имеет закругленные углы из-за его 25% -ного border-radius и позиционирован абсолютно на 5 пикселей слева и на 50 пикселей выше верха элемента.
Задание:
Превратите элемент на экране в сердце. Для этого необходимо:
- Свойство background-color селектора .heart::after должно иметь значение pink.
- Свойство border-radius селектора .heart::after должно иметь значение 50%.
- Свойство transform для класса heart должно использовать функцию rotate(), установленную на -45deg (градусов).
- Свойство contetnt селектора heart ::before должно быть пустой строкой.
