1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

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

Главные вкладки

Аватар пользователя VasyOK VasyOK 8 января 2019 в 9:28

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

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

Скрин:

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

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

Лучший ответ

Аватар пользователя ivnish ivnish 8 января 2019 в 10:06
2

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

Комментарии

Аватар пользователя gun_dose gun_dose 8 января 2019 в 11:07

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

Аватар пользователя Orion76 Orion76 8 января 2019 в 23:01

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

Аватар пользователя Phantom63rus Phantom63rus 8 января 2019 в 16:36

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

Аватар пользователя Phantom63rus Phantom63rus 10 января 2019 в 14:30

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

Аватар пользователя negociant negociant 10 января 2019 в 12:36

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

Аватар пользователя gun_dose gun_dose 10 января 2019 в 14:54

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

Аватар пользователя Orion76 Orion76 27 февраля 2019 в 18:44

А чё делать? селяви же..

Буквально недавно на одном проекте, дизайн интернет-магазина делала жена заказчика, которая в это время доучивалась с какого-то офлайн-дизайнера на дизайнера web-интерфейсов.

Тоже подобные "косые" элементы вэб-страницы: горизонтальные меню из кнопок-паралеллограммов и подобные же кликабельные блоки с иконками и многострочным текстом.

Я принципиально не специализируюсь на верстке, особенно "специфичной", но для хромов и файерфоксов получилось сделать без проблем.

К сожалению сам заказчик проверял работу на каком-то из последних IE.
А IE попростому так не может, пришлось заставлять.
Что естественно увеличило стоимость верстки..

Одним словом: маздай он и в Африке маздай-)

Аватар пользователя VasyOK VasyOK 27 февраля 2019 в 19:17

Некоторым людям не рекомендовано смотреть на наполовину сделанную работу. Из дизайна вырезаны трапеции и поставлены тут скрином. И вопрос касается верстки, а не дизайна.

Аватар пользователя Amirych Amirych 6 декабря 2019 в 19:00

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

Аватар пользователя likomne likomne 12 июня 2019 в 11:55

возможно в общей концепции сайта такие элементы смотрятся красиво, но как отдельные это не серьезно.
текст хочется от туда убрать... правда автор интересуется как его сверстать а не мнением о красоте. Я верстала более 50 сайтов, но тут мне трудно дать совет

Аватар пользователя VasyOK VasyOK 12 июня 2019 в 13:15
1

спасибо, вы мне очень помогли.
обращаю внимание, что вопрос по верстке, а не по дизайну. и давно уже решен.