ПитерСайт » Блог » Сердечко на 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;
}

Поддержка в браузерах

• Windows: Google Chrome, Firefox 16.0+, Edge 12.0+, Internet Explorer 10.0+, Opera 12.1+
• Linux: Firefox 16.0+, Opera 12.1+

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

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