Как сделать такие пятиугольники (+адаптивные) через css?

Думаю, что их стоит сделать svg polygon, но как это лучше реализовать, чтобы они и адаптивными были и подгонялись под ширину блока, в котором находятся?

Ответ

Решение SVG
Решение адаптивно. Работает во всех браузерах.
Вёрстка не сломается при изменении масштаба, так как все оформительские элементы: текст, патч, градиент находятся внутри SVG Если будет необходимость поменять начальные размеры блока, то нужно изменить проценты родительского контейнера .container
.container { width: 30%; height: auto; box-shadow: 0 0 4px #131824; }