ПитерСайт » Блог » Сердечко на CSS

Сердечко на CSS

Отрисовка сердечка с помощью CSS, не используя canvas, SVG или подгружаемые изображения. Один HTML-элемент и псевдоэлементы ::before и ::after

HTML код:

<div class="example">
	<div></div>
</div>

CSS код:

.example div {
	height: 6.8rem;
	width: 8rem;
}
.example div:before {
	content: "";
	position: absolute;
	left: 4rem;
	width: 4rem;
	height: 6.8rem;
	border-radius: 4rem 4rem 0 0;
	transform: rotate(-45deg);
	transform-origin: 0 100%;
	background: #c00;
}
.example div:after {
	content: "";
	position: absolute;
	left: 0;
	width: 4rem;
	height: 6.8rem;
	border-radius: 4rem 4rem 0 0;
	transform: rotate(45deg);
	transform-origin: 100% 100%;
	background: #c00;
}

Теги: CSS, Геометрические + фигуры + CSS, Псевдоэлементы

• Опубликовано: 19 Февраля, 2023
• Последнее редактирование: 19 Февраля, 2023