Как сделать сложную несимметричную grid-сетку?

Question

[kpa18]

Как сделать сложную несимметричную grid-сетку?

spoiler

Comments

[Ankhena]

3 столбца, 3 строки
зеленый элемент занимает 2 строки (1/3) и 3 столбца(1/4 или 1/-1)
желтый 2 строки (2/4) и 1 столбец (3/4)
Либо через grid-area, если удобнее.

Потом желтому псевдоэлемент с радиальным градиентом для имитации скругления границы у зеленого.

[kpa18]

Ankhena, можете сделать пример для скругления границ верхнего элемента, потому что я не понимаю, как это можно высчитать: https://codepen.io/MagicMight/pen/ExJLNdV?editors=1100

[Ankhena]

kpa18, я не вижу у вас вообще псевдо.
Вычислять там особо нечего: bottom: 100%; right: 0;

Уголки
https://jsfiddle.net/Ankhena/xjpefyq0/
https://codepen.io/AnnaSummer/pen/gOQVxBR
https://jsfiddle.net/Ankhena/wkdfngyu/
https://jsfiddle.net/Ankhena/1hu9ot0q/1/

[kpa18]

Ankhena, https://codepen.io/Ivan-Knyazev/pen/WNWJOWQ что я делаю не так?

[Ankhena]

kpa18,
top -38px это неудобно и мало надежно. Ведь при изменении размера скругления или границ, придется бежать менять top.

--gap: 8px;
bottom: calc(100% + var(--gap))

Да и гриду с виду удобнее с gap, чем бордеры дочерним.

[kpa18]

Ankhena,
Если использовать ваш подход:

--gap: 8px;
bottom: calc(100% + var(--gap))

, и подогнать % в bottom, то все равно остаются артефакты от псевдоэлемента:

[Ankhena]

kpa18, какой % в bottom подогнать?

Проверьте масштаб в браузере, чтобы он был 100%.

Можно сделать радиус чуть больше и на 1-2px заводить на границу. Если остается пропуск 1px. Так вполне может быть при округлениях.
Тогда будет что-то типа bottom: calc(100% + var(--gap) - 1px)

Либо задать вниз тень для псевдо в те же 1-2px.

[kpa18]

Ankhena, посмотрите, что получается с вашим кодом: https://codepen.io/Ivan-Knyazev/pen/WNWJOWQ

[Ankhena]

kpa18, --gap is not defined
Задайте --gap
Задайте нормально right, без left

Почитайте вообще про позиционирование. А то псевдиком не попасть в уголок...

[kpa18]

Ankhena, Торопился и не то скопировал, вот пожалуйста: https://codepen.io/Ivan-Knyazev/pen/WNWJOWQ

[Ankhena]

kpa18, прекрасный результат. Осталось довести до ума.
В идеале ещё бы связать радиус и градиент тоже через кастомные. А то сейчас у вас одно в px, а другое в em.

[kpa18]

Ankhena, Добрый день, с углами разобрался, а как можно выровнять текст внутри данного блока, чтобы он всегда был четко по линии, где начинает изгиб (отметил красной линией).

[Ankhena]

kpa18, padding, margin, width, grid, flex и наверное, ещё миллион способов. В некоторых с участием calc.

Я бы порекомендовала пройти что-нибудь типа тренажеров HTML Academy для освоения базовых навыков.
Хотя бы размеры, отступы, позиционирование, выравнивание, флексы, гриды. Дальше смотреть по потребностям.
Как альтернатива почитать на Доке https://doka.guide/css/

Answer 1

[MagicMight]

https://codepen.io/MagicMight/pen/ExJLNdV?editors=1100
можно так

Comments

[kpa18]

А как решить задачу со скруглением углов у самого верхнего элемента?

[MagicMight]

kpa18, сделайте сразу рамки картинкам, чтобы не усложнять процесс через верстку