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, но таки знания помогут сэкономить на коде.
Виктор, я, конечно, не расчитывала, что вы станете на полном серьёзе всё расписывать прям тут.
Но в конце вывод хороший.
Спрашивающие зачастую не в состоянии определить соответствующие ответы. Или считают, что ответ может быть только один или не знают, что так хорошо бы делать или просто забивают. Поэтому есть ещё и кураторы.
Можете попробовать стать куратором и отметить хорошие ответы.
Кажется, сначала нужно ответить на вопрос, а с какой целью вы отвечаете на вопросы. Ради чиселок в профиле?
Следующий вопрос о том, зачем нужен этот сервис.
Так станет понятно, что лайки и галочки, чтобы нам было повеселее и не более того.