Как сделать скос у блока через css+html?

Question

[Nikita Fedorov]

Как сделать такой блок со скосом снизу?

Answer 1

[Ilya Loginov]

Можно применить clip-path к блоку:

clip-path: polygon(0 0, 100% 0, 100% 88%, 0% 100%);

Comments

[Шохрух Шаймардонов]

вариант хороший (в плане удобства верстальщику), но с поддержкой у clip-path беда

Answer 2

[RAX7]

Answer 3

[Шохрух Шаймардонов]

Добавьте к блоку ::after и из него (after) с помощью border сделайте треугольник нужного вам размера, и полученный треугольник сместите вверх, чтоб он перекрывал ваш блок

Comments

[Сергей delphinpro]

Когда речь идет о блоках во всю ширину, треугольники из бордеров плохая идея, там нельзя использовать проценты.
Лучше воспользоваться трансформациями.

[Шохрух Шаймардонов]

Сергей delphinpro, вариантов много, и возможно вы правы с треугольниками. Но как вариант для получения желаемого результата, думаю, подходит

[Сергей delphinpro]

Шохрух Шаймардонов, Именно что не подходит =) Иначе бы я ничего не писал.
Вы правы в том, что делается отдельный элемент белого цвета и располагается внизу. Но как вы его рекомендовали сделать, в данном случае не подходит. Ну не получится нормально сделать этой техникой с треугольниками.

[Шохрух Шаймардонов]

Сергей delphinpro, буду знать)