Как сверстать блок с контентом с “кривой” формой?

Есть такой блок с контентом, он может немного сжиматься в ширину (пикселей на 200) и резиновый в высоту
Можно ли как-то сверстать его не прибегая к костылям с картинками? В CSS3 полигоны вроде мало где работают ещё

Ответ

Сделайте фон svg, например, так:

Для того, чтобы SVG был резиновым, обратите внимание на код width="100%" height="100%" preserveAspectRatio="none"
SVG лучше делать отдельным файлом (предпочтительный способ), но также можно делать как часть значения background (Внимание, представленный ниже код будет работать только в webkit-браузерах!):
div { width: 250px; height: 250px; background: url('data:image/svg+xml;utf8,'); }

Для того, чтобы код работал в MS Edge и Firefox символы внутри url должны быть escaped после кодировки utf8, поэтому заменим двойные кавычки на одинарные, # на %23 и % на %25
div { width: 250px; height: 250px; background: url("data:image/svg+xml;utf8,"); background-size: 100% 100%; /* Фикс для Firefox, чтобы изображение корректно растягивалось */ }

Также для корректного масштабирования в Fifefox добавляем background-size: 100% 100%;