Мастера CSS, подскажите: как сделать 2 прямоугольные трапеции, обращенные друг к другу?

Аватар пользователя VasyOK

Поздравляю с Рождеством мастеров верстки!

Подскажите: как сделать 2 прямоугольные  трапеции, обращенные друг к другу?

Скрин:

Пока что не получилось, так как на скрине. Разными способами любовью занимался, ерунда какая-то в результате выходит. Уже и с transform мучался и с clip-path. Может что-то не понимаю. Или может не мучаться, а картинкой поставить?

Борьба:
https://jsfiddle.net/PlayboyZP/L24u0mrw/

Тип материала:
0 Thanks

Комментарии

Аватар пользователя itcrowd72
itcrowd72 1 неделя назад
2

Я бы расстрелял твоего дизайнера :)

Аватар пользователя VasyOK
VasyOK 1 неделя назад

В исходном PSD еще кое-что было в этом блоке. Я убрал потому как это не относится к вопросу.

Аватар пользователя gun_dose
gun_dose 1 неделя назад

Проблема в том, что тут одновременно радиус и тень, поэтому все общепринятые способы сделать такие фигуры не подходят.

Аватар пользователя Orion76
Orion76 1 неделя назад

Кхе-кхе.. и куда этот мир котится?
Уже из браузера фотошоп сделали..
Эт так скоро дизайнеры будут дизайн прямо в браузере рисовать..
А что тогда бедным верстальщикам делать?
А я только хотел svg основательно посмотреть-)

Аватар пользователя Phantom63rus
Phantom63rus 1 неделя назад

Я не дизайнер, но имею сказать: это журнальная вёрстка и тут просто напрашивается выравнивание текста по ширине по трапеции, т.е. правый край под углом. Насколько мне известно цсс так не позволяет, а без этого выглядит как-то глупо. Голосую за расстрел дизайнера!:)

Аватар пользователя sas@drupal.org
sas@drupal.org 1 неделя назад

Как в мат уравнении, - нет члена = нет проблемы?

Аватар пользователя Phantom63rus
Phantom63rus 1 неделя назад

Типа того. Вообще современное состояние хтмл+цсс+... это грёбаный лес костылей. Стопиццот стандартов с особенностями отображения в разных браузерах. При этом банальное центрирование по вертикали до сих пор делается кучей способов и все не блещут красотой.

Аватар пользователя negociant
negociant 1 неделя назад

На тостере был недавно похожий вопрос https://toster.ru/q/593185 - там есть решения
Там тоже блоки с тенями, радиусом и наклоном. Только наклон горизонтальный, а не вертикальный.
Но дизайнер однозначно упоротый и не знаком с версткой, иначе бы не делал таких элементов в дизайне.

Аватар пользователя gun_dose
gun_dose 1 неделя назад

Да, точно, там нужно свойство clip-path. Вот только что будет при другой длине текста или на другом разрешении, страшно представить.

Аватар пользователя negociant
negociant 1 неделя назад
1

По-нормальному clip-path лучше не применять. Лучшее решение будет однозначно на svg/