<div class="heart"></div>
:root {
  --size: 160px;
  --color: tomato;
  --border-color: rgba(255, 0, 0, 0.2);
}
.heart {
  background: var(--color);
  width: var(--size);
  height: var(--size);
  transform: rotate(0deg);
/*   position: relative; */
  margin: 100px auto 0;
}
.heart::before,
.heart::after {
  width: var(--size);
  height: var(--size);
  position: absolute;
  content: "";
  border-radius: 50%;
}
.heart::before {
  top: calc(-0.5 * var(--size));
  background-color: pink;
}
.heart::after {
  right: calc(-0.5 * var(--size));
  background-color: teal;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.