Как сделать косые углы у блока?

Question

[WQP]

Здравствуйте, как сделать такой скос? То что тёмное, это изображение


Пробовал с clip-path: polygon(55% 7%, 0 0, 100% 0); но исчезает всё кроме угла

Answer 1

[Александр Филиппенко]

У Вас clip-path должен 5 точек описывать.

Answer 2

[WQP]

-webkit-clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);

Comments

[automatik]

молодец, а почему только свой ответ отметил решением?

[Roman K]

automatik: Вот бы банить таких с тостера навсегда.

[WQP]

automatik: может потому что я сделал, а только потом уже прочитал, что он должен состоять из 5 точек?

Answer 3

[Олег]

Псевдоэлементами https://jsfiddle.net/Politonius/jgwrfej2/

Comments

[Александр Филиппенко]

вариант с псевдоэлементами более кроссбраузерный, но более сложный. И не подходит если фон не однотонный.

[Олег]

Александр Филиппенко: У автора однотонный на картинке ;)

[WQP]

Олег: Нет, вы не поняли. Скос должен быть у картинки, а не у однотонного блока. Так что не получится псевдоэлементами. Решения я уже прикрепил

[Олег]

WQP: я не спорю)) Просто вариантов реализации много может быть. Я предложил один, вы другой. И всего то.