Гуглить "схлопывание и выпадение вертикальных margin".
Потом "разница между padding и margin". Потому что это вообще не margin. Но схлопывание как раз таки должно научить отличать когда что использовать.
Serezha, Пример clip-path? Да вот, пожалуйста https://bennettfeely.com/clippy/ и дальше в гугл разбираться с увиденным. Нужная вам форма находится в макете фигмы. Чем-то же её дизайнер обрезал.
luxurypluxury,
- изначально два столбца (или на js)
- не гриды
- гриды, но ограничение по высоте и заголовков и выпадашек. Выпадашка = заголовок + gap. Ограничение высоты заголовков у вас и так должно быть, иначе и без выпадашек нарушатся желалки.
- флексы колонками + фикс высота контейнера (на js) + js для псевдо, если активный элемент во втором столбце
- js (много разных вариантов для вычислений)
luxurypluxury, к сожалению, эта информация мало чем отличается от того, что в вопросе.
"Не должна" - отлично. А должно-то что?
Давайте подробнее варианты:
1. Можно открывать поверх следующих элементов: фикс высота + абсолюты или просто выпадение за счет высоты. Вероятно, не получится без JS, если начальная высота неизвестна.
2. Со сдвигом нижних элементов.
2.1. Только своего столбца: потребуется JS для вычисления количества строк, которые должен занять кликнутый элемент. (Теоретически, можно сразу каждому элементу задать большое количество строк, но тогда умрет gap)
2.2. Вообще сдвиг всех элементов и перераспределение по столбцам. Кликнули по элементу в первом столбце - остальные сдвинулись в обоих столбцах и перераспределились по столбцам.
=> Использовать css columns. JS не нужен, но распределение по столбцам по усмотрению браузера, а оно не всегда выходит красивым.
2.3. Можно открывать кликнутый элемент на всю ширину родителя. Соседа при этом тоже можно/нужно растянуть.
2.4. Ваш вариант.
Можно использовать скрипты типа masonry сами по себе или в сочетании с гридами.
Описать на своём родном языке, а что должно происходить вместо этого. Дело в том, что вы и нам не рассказали.
Потом перевести всё это на CSS.
Вероятно, от гридов при этом придется избавиться или добавить js для расчета grid-row
Serezha, нужно прекратить писать в чужом ответе.
Подумайте чьи именно это должны быть псевдоэлементы, чтобы получилось как на скрине.
Отредактируйте вопрос и прикрепите к нему песочницу на codepen.io с тем, что у вас не получилось.
Serezha, вы можете сделать градиент из белого в прозрачный?
Ну или тупо скопировать код из моих примеров, поменяв цвет на свой и повернув уголок, потому что у меня как раз таки в прозрачный.
alexalexes В данном случае CSS никак не ограничивает задумку дизайнера.
Serezha, есть: обычный радиальный градиент. Можете поискать по моим ответам и комментариям. За последний месяц я раза пару раз точно отвечала на этот вопрос.
1. Песочница нерабочая, картинок не видно, размеры не проставлены.
2. За пропорции отвечает в основном aspect-ratio. (а также хак с паддингами, единицы измерения от вьюпорта или контейнера и т.д.)
3. Нет образца - не понятно, зачем вообще абсолют.
Для начала, потому что нарушены правила вложенности тегов. У вас там ссылки снаружи li, должно быть наоборот.
Прогоните код валидатором и исправьте ошибки.
Cortez72, общепринятые стандарты есть, но размеров во-первых, всё равно много, а во-вторых, дизайнер не обязан использовать именно такую ширину фрейма.
background-size
object-fit
aspect-ratio
picture
и т.д.
И немножко банальной геометрии