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 — это косая практика.
Breeze1, такой ответ, как я вижу, уже есть, лучше его отметьте. Но у columns есть проблемы с тенями в целом с тем, что выходит за пределы колонок в месте разрезки, поэтому я не использую их, а использую JS.
Единственно нормальный метод — это clip-path, где точно можно задать скос.