Clipping The Required Portion Of The Image Using CSS

So basically I have an image of a sunset I want to use as my banner for my webpage but I just want to use a portion of it, not the whole image. I figured out how to clip the image

Solution 1:

Applying clipping to elements in CSS is clip-path

For example:

.element { clip-path: inset(10px 20px 30px 40px); /* Also can take single values to make all sides the same, or 2 values (vert/horz), or 3 values (top/horz/bottom). */ }

Codepen Example : here.