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

#html #css #css3 #вёрстка #svg

Есть такой блок с контентом, он может немного сжиматься в ширину (пикселей на 200)
и резиновый в высоту

Можно ли как-то сверстать его не прибегая к костылям с картинками? В CSS3 полигоны
вроде мало где работают ещё


    

Ответы

Ответ 1

Сделайте фон 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%;.


Ответ 2

Мне дизайнер скинул версию с более правильным градиентом,
  hastebin.com/uhujufuyey.xml как его научится резинить?   


Чтобы svg был адаптивным необходимо убрать из шапки svg файла атрибуты viewport,
то есть в вашем примере от дизайнера необходимо удалить width="1380px" height="865px".
Оставить только viewBox – viewBox="0 0 2760 1730".
Как влияют viewport и viewBox на масштабирование и адаптивность svg можно почитать
здесь  

Когда не указан viewport (width, height) они по умолчанию равны  width="100%" height="100%"    

В примере ниже svg изображение добавлено непосредственно (инлайн) в HTML страничку. 

Проверена адаптивность фигуры в Chrome, Firefox, Opera. В IE11 фигура не адаптивна.