При наведении курсора мыши разделите белую точку CSS на две половины, разделенные по диагонали в пользовательском интерф ⇐ CSS

[Anonymous]

Итак, это задача, которую я пытаюсь выполнить. Как вы можете видеть на изображении, рядом со словами «Перспектива» есть белая точка
beforeAfter
При наведении курсора он разделяется пополам по диагонали.
Это реализовано на этом сайте: Sequoiacap
Моя задача: {/* TODO: на сайте OG это Белый круг разделяется по диагонали пополам а затем правая соединенная часть перемещается вниз, и создается впечатление, что две половины круга все еще соприкасаются друг с другом, но это похоже на яблоко, разрезанное по диагонали, а верхняя часть соскальзывает вниз под действием силы тяжести */
Мне нужно добиться того же в React, используя Chakra UI @ 2.10.4 (не новый!)
Важно отметить, что эти разработчики OG не использовали никакого SVG. изображения, по крайней мере, я не могу найти ничего для загрузки
вот что я сделал в качестве обходного пути:
`

{/* TODO: на сайте OG этот белый круг разделяется по диагонали на половину, а затем на правую. разделенная часть перемещается вниз, поэтому она выглядит как две половинки круги все еще соприкасаются друг с другом, но как яблоко, разрезанное по диагонали, а верхняя часть соскользнула вниз под действием силы тяжести */

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

            {/*  */}

{/* Default White Circle */}


{/* Hidden Split Circle Image */}



PERSPECTIVE
`

Это не чисто и не элегантно, поскольку я новичок, мне любопытно, как это было достигнуто, и если я хочу добиться того же, как я могу?
Я попробовал _before:: и _after::, но для меня это слишком сложно, поэтому мой обходной путь состоял в том, чтобы заменить белую точку скрытым предварительно разделенным изображением при наведении курсора мыши.>

Подробнее здесь: https://stackoverflow.com/questions/792 ... -chakra-ui