Make custom shapes that are responsive and work good as backgrounds with SVG's. The SVG polygon element uses x and y coordinates, so it's easy to make basic SVG shapes without software. Well you will need a code editor of your choice of course.
To make the shape responsive set the viewBox="x y width height" to the width and height that the polygon will be. This shape will be responsive as long as it is set as the same width as the polygon.
There are five polygon points that start at the top left, top right, bottom right, bottom left and back to the top left.
<svg viewBox="0 0 1200 300" xmlns="http://www.w3.org/2000/svg">
<polygon points="0 0, 1200 0, 1200 300, 0 180, 0 0" fill="grey" />
</svg>Example
To make combinations of shapes we can add more polygons elements.
<svg viewBox="0 0 1200 300" xmlns="http://www.w3.org/2000/svg">
<polygon points="0 50, 1200 0, 1200 60, 0 60, 0 50" fill="grey" />
<polygon points="0 60, 1200 60, 1200 300, 0 180, 0 0" fill="darkgrey" />
</svg>Example
Making custom shapes with SVG's can be easier than making shapes with CSS. Although polygon and polyline elements are always rendered as a sequence of straight line segments between the coordinates you provide. So there is no way to automatically make the corners have a radius, like an CSS border-radius.
What we can do is use the CSS stroke property to create the rounded corners effect. We also have to keep in mind the SVG viewBox to account for the the added stroke-width.
.round {
stroke: grey;
stroke-width: 20;
stroke-linejoin: round;
}<svg viewBox="0 0 1210 310" xmlns="http://www.w3.org/2000/svg">
<polygon class="round" points="10 10, 1200 10, 1200 300, 10 180, 10 10" fill="grey" />
</svg>Example
Conclusion
Creating custom SVG shapes gives you a really light weight and responsive shape with nice crisp lines. If you have a more complex shape figma is great for vector graphics and will output an SVG using the polygon element.