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
Keeping an angled edge at the same degree for masking
We can also hold the angle in responsive with the calc() property like this 100% calc(100% - 6vw). The calc() property is handy for things like this. It can calculate basic math on the fly.
We simply replace the x, y coordinates of the angle with a calculation of 100% percent minus the screen width size. Using 6vw I was able to create approximately the same angle that will now hold it's degree in responsive. Now we can just change the view width number to increase or decrease the angle.
We'll use the CSS clip-path: polygon() property instead of a SVG to use with the calc() property.
.angle {
position: relative;
height: 10rem;
background: var(--clr-example-one);
}
.angle:before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 10rem;
clip-path: polygon(0 97%,100% calc(100% - 6vw),100% 100%,0 100%);
background: var(--clr-example-two);
}To create a masking effect use the :before qseudo class on the div you want to mask.
<div class="angle"></div>Example
You can drag the browser screen width to see the the calc () property do its magic. If we didn't replace the original coordinates with the calc () property the angle would get steeper as the shape gets smaller.
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.