<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.