CSS Art
one <div>
Правило простое: одна разметка <div>, вся форма - через CSS и псевдоэлементы ::before / ::after.
Откройте карточку, чтобы увидеть превью и код.
Звезда
Три треугольника: сам div и два повёрнутых псевдоэлемента.
Открыть ->Смайлик
Круг-лицо, глаза через box-shadow у ::before, улыбка у ::after.
Открыть ->Сердце
Повёрнутый квадрат и два круга на псевдоэлементах.
Открыть ->Луна
Объём через inset box-shadow, кратеры - точки псевдоэлементов.
Открыть ->Призрак
Дружелюбный призрак с волнистым низом из radial-gradient.
Открыть ->Ракета
Корпус, нос и огонь старта - всё ещё один div.
Открыть ->Мороженое
Шарик, блик и вафельный конус через clip-path.
Открыть ->Pac
Conic-gradient для рта и точки-еда на ::after.
Открыть ->Облако
Мягкое облако из пересекающихся кругов через box-shadow и псевдоэлементы.
Открыть ->Бриллиант
Грань камня из повёрнутых квадратов и бликов.
Открыть ->Кофе
Чашка, ручка и пар - всё из одного div.
Открыть ->Ёлка
Ярусная крона из треугольников и маленький ствол.
Открыть ->Зонт
Купол и изогнутая ручка на псевдоэлементах.
Открыть ->Шарик
Круглый шарик, узелок и тонкая нитка.
Открыть ->Рыбка
Овальное тело, глаз и треугольный хвост.
Открыть ->Домик
Квадратный дом, треугольная крыша и светящееся окно.
Открыть ->