<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(-45deg); */
  position: relative;
  margin: 100px auto 0;
}
.heart::before,
.heart::after {
  width: var(--size);
  height: var(--size);
  position: absolute;
  content: "";
  border-radius: 50%;
/*   mix-blend-mode: difference; */
}
.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.