On dribbble I’m seeing a lot of non-square images for desktop sites.

Because they’re not rectangle, they’re also not taking up the full width of the viewport and so you will often see text that will overlap with the image or be in the newly created space.

These non-square images are often using a rounded corners, think he’s slightly skewed quadrilateral with rounded corners. Clip path Is likely at play here or just rendering out transparency from Figma.

The version is either not being used on mobile or being toned down dramatically on mobile.

As an aside on Jake Trent.com there’s a cool “jost” font.

So for curves instead of CSS clip-path you use SVG clipPath. You could try clip-path: ellipse(x) but that will only take you so far. Instead use clipPathUnits=”objectBoundingBox” and put an ID on the clipPath. You can add an SVG as a pseudo element either before or after. Set the container to relative and then use the background URL center bottom no repeat bottom 100% position absolute height 103 pixels with 100%. Also note that you can use the same SVG and just flip using top 100% rotate X 180° and put any shared properties in a combo css selector separated by a comma.

Check out a site called getwaves.io to create SVG waves. You can use the site called blobmaker.app to bring in blobs as well