С помощью чего можно исказить блок div?

Question

[Вика Мармеладка]

Ребят как можно сделать подобные горы что на скриншоте? Может с помощью transform? Если да то как именно?...

Answer 1

[Максим]

codepen.io/Geyan/pen/LkvALr?editors=110 вот на clip-path
но лучше конечно на svg - но лучше не парится и вырезать в фотошопе.
codepen.io/Geyan/pen/kXmpAJ?editors=110 - это svg -

Comments

[Сергей delphinpro]

clip-path - это скорее "чтобы знать, что так можно". На деле поддержка никакая...

[Максим]

Сергей: я проверял во всех броузерах кроме IE (у меня его просто нету)

[Сергей delphinpro]

Максим Жаров: в IE не работает. даже в последнем Edge

[Сергей delphinpro]

Максим Жаров: в FireFox 50 - не работает.

так что clip-path - это пока для теории и узкого внутреннего применения, где можно заставить юзать только хром.

[Максим]

Сергей: вы правы частично , но можно прикрутить js и тогда это заработает везде , я автору дал пример для тренировок

Answer 2

[dom1n1k]

Картинкой это нужно делать. Растровой или векторной - это надо уже смотреть задачу в деталях. Но никакие трансформации тут нафиг не упали. Не нужно мудрить и изгаляться на пустом месте!

Comments

[Вика Мармеладка]

Ох и плохой из вас верстальщик...

[Николай Антонов]

Рич Пиана: почему? Правильно парень говорит! А еще лучше в фотошопе сделать jpg картинку и вставить на сайт, быстро и респонсив в бонус.

[Вика Мармеладка]

Николай Антонов: Зачем лишний раз засорять сайт всяким хламом декоративным когда можно создать из того что уже иметься декорацией... Вы бы еще сказали что можно иконки использовать как картинки. Я бы вас тогда точно уважать перестал...

[Вика Мармеладка]

Николай Антонов: И попрошу заметить одна "горка" прозрачная что обычной картинкой не сотворишь. Или я ошибаюсь?...

[Вика Мармеладка]

Николай Антонов: joxi.ru/p27LXKkUgnv1A7

[Serj-One]

Рич Пиана: Что за бред ты несёшь? dom1n1k прав на все 100. Мудрить с трансформациями в данном случае - абсурд. Это обычное изображение.

Answer 3

[Николай Антонов]

transform: skew