Как сделать такую нестандартную верстку?

Question

[Артур]

Здравствуйте, уважаемые веб-разработчики.
Подскажите, как бы вы сверстали такие элементы на сайте?

А конкретнее, как правильно верстать такие наклонные элементы? Не охота мучатся с отрицательными марджинами и абсолютным позиционированием. Есть ли какое-либо современное решение?

Answer 1

[Дмитрий Новиков]

Если хотите сделать элементы именно наклонными, а не прямоугольными - используйте CSS Transform.
Но я бы все-таки сделал обыкновенными слоями, т.к. поддержка и кроссбраузерность важнее.

Comments

[Артур]

Спасибо большое за ответ. Да, слои самое кроссбразуерное решение. Так в принципе и начал делать. Но решил узнать у профессионалов, может существуют какие-то "фишки" для таких элементов) Просто весь сайт наполнен такими уголками скосами

[Grigruss]

IamArtyShock: фишки существуют, сделать можно, но с неопытности время уйдёт много... К тому же ваш пример сделано слоями без трансформации. Видно по паттерну.

[Артур]

Григорий: Может я неправильно выразился, но опыта у меня хватает) Как раз хотелось отойти от стандарта и попробовать сделать это современными методами. Пример на рисунке - это сайт который я сейчас верстаю и это скриншот с фотошопа, то есть еще не сделанный)

[Grigruss]

IamArtyShock: ну, собственно, из моих слов понятно, что если трансформом вертеть картинку, паттерн кривой будет, значит картинку по углом вырезать... Не факт, что станица получится более оптимизированной, чем вы делаете...

[Артур]

Григорий: Вот теперь я понял вашу точку зрения. Благодарю.

[Владимир Проскурин]

Григорий: а если просто один слой например на 30 градусов повернуть, а внутри сделать еще один и повернуть на -30, тогда и картинка как есть будет.

[Grigruss]

Vlad_IT: масло маслянное? :-) Можно, но зачем?

[Владимир Проскурин]

Григорий: тут чисто технический интерес возник) В продакшене конечно такое делать пока не надо.

[Grigruss]

Vlad_IT: ну вообще да, именно так и делается. +30, -30... я как то пробовал использовать один паттерн на фон и на кнопки, только вертеть пытался на 90 градусов... в итоге плюнул и сделал два паттерна... :-)
Вот неплохая статья на эту тему.

Answer 2

[Дмитрий Пыркин]

png и svg в помощь и все слоями всего то надо 4 слоя

Comments

[Артур]

Благодарю. Про пнг - это конечно понятно. А вот с свг еще ни разу не сталкивался и захотелось столкнуться) Встречал на одном сайте решение yf svg подобных моментов, но теперь не могу вспомнить адрес сайта.