Heart CSS

heart-css.css

:root {
    --heart-size: 100px;
}
* { 
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.heart{
    height: var(--heart-size);
    width: var(--heart-size);
    background-color: #ff0000;
    transform: rotate(45deg);
    position: relative;
    left: calc(var(--heart-size) / 2);
    top: calc(var(--heart-size) / 2);
}
.heart::before, .heart::after {
    content: '';
    background-color: inherit;
    height: inherit;
    width: inherit;
    display: block;
    position: absolute;
    border-radius: 50px;
}
.heart::before {
    bottom: calc(var(--heart-size) / 2);
}
.heart::after {
    right: calc(var(--heart-size) / 2);
}