Создайте (кликабельную) форму сердца, используя только CSS. ⇐ CSS

[Anonymous]

Создать форму сердца не проблема. Несколько примеров можно найти здесь:
Как создать форму сердца с помощью CSS?
Проблема этих решений заключается в том, что если вы хотите, чтобы форма сердца была кликабельной, вся Элемент HTML кликабельен (тег DIV или тег IMG), а не только форма сердца.
Я нашел решение для создания кликабельного сердца здесь: https://codepen.io/ bailey_jones/pen/jONaONK
Фрагмент кода:

Код: Выделить всё

#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}

Код: Выделить всё

[url=#][/url]

Здесь позиция: абсолютная< /em> используется. Я хочу использовать position:relative и размер сердца относительно родительского контейнера, и я хотите, чтобы он был центрирован в родительском контейнере. это не должно быть сложно, но форма моего сердца неправильная.
Фрагмент кода:

Код: Выделить всё

body {
width: 90vw;
height: 90vh;
}

body,
#container {
display: flex;
align-items: center;
justify-content: center;
}

#container {
width: 400px;
height: 400px;
background: yellow;
}

#heart {
position: relative;
--width: 100%; /* was 100px, is 400px */
--height: 90%; /* was 90px, is 360px */
--x: calc(.5 * var(--width)); /* was 50px, is 200px */
--y: calc(8/9 * var(--height)); /* was 80px, is 320px */
width: var(--width); /* was 100px, is 400px */
height: var(--height); /* was 90px, is 360px */
border: 1px dotted blue;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: var(--x);
top: calc(var(--height) - var(--y)); /* Does this make sense? */
width: var(--x);
height: var(--y);
background: red;
border-radius: var(--x) var(--x) 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}

Код: Выделить всё

[url=#][/url]

Хуже всего то, что теперь кликабельна не только форма сердца. Почему и как это исправить?

Подробнее здесь: https://stackoverflow.com/questions/787 ... g-css-only