kpa18, padding, margin, width, grid, flex и наверное, ещё миллион способов. В некоторых с участием calc.
Я бы порекомендовала пройти что-нибудь типа тренажеров HTML Academy для освоения базовых навыков.
Хотя бы размеры, отступы, позиционирование, выравнивание, флексы, гриды. Дальше смотреть по потребностям.
Как альтернатива почитать на Доке https://doka.guide/css/
Давайте объясню, что тут происходит. У части проблем известные решения или они тут ежедневно повторяются, но некоторые без кода не решаются. Кастомные курсоры это не лучшая практика, не любят этого пользователи. Поэтому, проблемы с ними редкие и лично у меня в голове есть только предположения, что происходит и их бы проверить. Для этого нужна песочница, которую обычно делает автор вопроса.
Прикладывать код и песочницу это очень хорошая практика для задающих вопросы. Так ответы будут и быстрее и качественнее.
kpa18, прекрасный результат. Осталось довести до ума.
В идеале ещё бы связать радиус и градиент тоже через кастомные. А то сейчас у вас одно в px, а другое в em.
Можно сделать радиус чуть больше и на 1-2px заводить на границу. Если остается пропуск 1px. Так вполне может быть при округлениях.
Тогда будет что-то типа bottom: calc(100% + var(--gap) - 1px)
С помощью Gihub Action вы можете делать сборку в отдельную ветку (обычно называют gh-pages). И делать так, чтобы индексный файл там получался где нужно.
3 столбца, 3 строки
зеленый элемент занимает 2 строки (1/3) и 3 столбца(1/4 или 1/-1)
желтый 2 строки (2/4) и 1 столбец (3/4)
Либо через grid-area, если удобнее.
Потом желтому псевдоэлемент с радиальным градиентом для имитации скругления границы у зеленого.
dima89e, https://doka.guide/css/position/
можно гридами.
Но сначала хорошо бы определиться как это должно выглядеть при расширении и сужении окна.
Можно, конечно, делать независимые решения для разных media, но таки знания помогут сэкономить на коде.
Во-первых, есть
image-set
Во-вторых, есть скрипт определяющий поддержку webp.
Так что это вообще не аргумент.
Ещё у вас картинка по виду векторная. Может она будет svg?
Ещё можно попробовать заменить абсолют на гриды. А абсолютить уже картинку, если по первому варианту.
И картинке тогда задавать aria-hidden.