Как придать необычную форму div средствами CSS?

Question

[nismachny]

Доброго времени суток!

Подскажите мне пожалуйста, как можно придать форму данному блоку средствами css. По сути надо изменить форму у div.
Вот изображение:


Знаю, что можно решить этот вопрос обычной svg с position:absolute, но интересует более изощренное решение изменением углов у div.
Перекрывать этот блок псевдоэлементами before и after тоже не хочется, тк нужно сохранить прозрачность по краям.
Закрасить градиентом и добавить тень смогу сам)

Заранее спасибо! Всем мира!

Comments

[WapSter]

Никак( уже можно изменять фигуру для современных браузеров, но вот скруглить углы не выйдет.

Answer 1

[RAX7]

Comments

[nismachny]

Решение хорошее, но при добавлении тени, теряется прозрачность у краёв.

[RAX7]

nismachny, используй filter: drop-shadow вместо box-shadow

[nismachny]

круто! спасибо!

Answer 2

[Илья Савиных]

.block {
     clip-path: polygon(0% 40%,100% 0%,100% 100%,0% 100%) margin-box;
     margin: 0;
}

попробуйте так..
Ссылка на статью - здесь подробнее об этом говориться

Comments

[nismachny]

Прикольное свойство, но оно режет углы, соответственно border-radius не работает

Answer 3

[ummahusla]

Я бы тут поискал https://css-tricks.com/the-shapes-of-css/

Comments

[nismachny]

Искал, но не нашел :(