Сердечко на 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
Яндекс.Директ Google AdWords Bing Ads Amazon Product Ads HTML CSS JavaScript jQuery PHP CMS CMF MODX Wordpress Drupal ExpressionEngine htaccess SEO SEM HTML CSS JavaScript jQuery PHP CMS CMF MODX Wordpress Drupal ExpressionEngine htaccess SEO SEM Яндекс.Директ Google AdWords Bing Ads Amazon Product Ads