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