PDF сам по себе — это как картинка. Если PDF сделан нормально и текст в нём — это именно текст, то некоторые программы имеют режим подгонки текст под экраны, который ломает разметку PDF, но делает то, что вы хотите.
Через CSS и HTML вы это не сделаете. Возможно, есть JS-плагины для отображения PDF, у которых есть оная функция.
Там ещё координаты можно через calc() задавать, чтобы задавать на точное значение скос в пикселях, например. Чтобы совмещать разные секции с точностью до пикселя.
Strimaxart, наверное, надо было с этого начать как бы, нет? Вы этого в теле вопроса не указали, а указали совсем иное. Ну с тенями тогда у вас никаких вариантов нет, кроме как изголяться. Маску делать, что-то там ещё пытаться совместить с ней. Или же картинку изначально обрезать, делая PNG + filter: drop-shadow().
saplas, вы читали мой комментарий выше? Понятное дело будет обрезать, коли вы на весь блок делаете обрезку с помощью clip-path. Посмотрите пример из моего комментария.
К сожалению, это даст картину только для того движка браузера, в котором вы смотрите. И есть засада, когда баги того же Android Chrome вы не увидите в десктопной его версии. Или тот же iOS Safari отличается от собрата на ПК. Да в целом в том же Chrome проверять Safari бессмысленно.
Для полноценной проверки нужно ставить эмуляторы устройств (например, XCode для iOS Safari). Или пользоваться сервисами а-ля Browser Stack. Или иметь реальные устройства на руках.
Стилизовать нативный select можно минимально. А сделать так, как у вас там на картинке, — нереально.
Для этих целей делают либо вручную вёрстку и поведение через JS, либо пользуются плагинами а-ля Select2, которые делают основную работу за вас: https://select2.org/
qwekaqwe, а в чём проблема прижать карту к краям? Отрицательным margin, если прямой наследник, или, если не прямой, — отрицательный margin + calc(100 + двойной отступ). Либо тупо padding обнулить у родителя, что логичнее.
P. S. Делать блоки строго 320px — это косая практика.
