Как делать блоки такого вида?

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

Ответ

Решение SVG
Решение адаптивно, работает во всех браузерах. Текст и знак параграфа находятся внутри блока SVG, поэтому никогда не нарушится их взаимное положение и текст не выйдет за пределы блока при любом изменении размеров окна браузера. Рамки и текст будут изменяться пропорционально.
* { margin: 0; padding: 0; } .container { width: 100%; height: 100%; }

Второй вариант блока с тенью
Для реализации тени под первый полигон добавляем второй полигон и смещаем его на 2px вправо и вниз: * { margin: 0; padding: 0; } .container { width: 100%; height: 100%; }