Здравствуйте, уважаемые веб-разработчики.
Подскажите, как бы вы сверстали такие элементы на сайте?
А конкретнее, как правильно верстать такие наклонные элементы? Не охота мучатся с отрицательными марджинами и абсолютным позиционированием. Есть ли какое-либо современное решение?
Если хотите сделать элементы именно наклонными, а не прямоугольными - используйте CSS Transform.
Но я бы все-таки сделал обыкновенными слоями, т.к. поддержка и кроссбраузерность важнее.
Спасибо большое за ответ. Да, слои самое кроссбразуерное решение. Так в принципе и начал делать. Но решил узнать у профессионалов, может существуют какие-то "фишки" для таких элементов) Просто весь сайт наполнен такими уголками скосами
IamArtyShock: фишки существуют, сделать можно, но с неопытности время уйдёт много... К тому же ваш пример сделано слоями без трансформации. Видно по паттерну.
Григорий: Может я неправильно выразился, но опыта у меня хватает) Как раз хотелось отойти от стандарта и попробовать сделать это современными методами. Пример на рисунке - это сайт который я сейчас верстаю и это скриншот с фотошопа, то есть еще не сделанный)
IamArtyShock: ну, собственно, из моих слов понятно, что если трансформом вертеть картинку, паттерн кривой будет, значит картинку по углом вырезать... Не факт, что станица получится более оптимизированной, чем вы делаете...
Vlad_IT: ну вообще да, именно так и делается. +30, -30... я как то пробовал использовать один паттерн на фон и на кнопки, только вертеть пытался на 90 градусов... в итоге плюнул и сделал два паттерна... :-) Вот неплохая статья на эту тему.
Благодарю. Про пнг - это конечно понятно. А вот с свг еще ни разу не сталкивался и захотелось столкнуться) Встречал на одном сайте решение yf svg подобных моментов, но теперь не могу вспомнить адрес сайта.
Простой
