Making an image looking roundish in CSS

Hi,

I have been sent a design that I need to apply. I tried to do some reverse engineering on the Html and Css but I found it not very easy to read, looking like nested russian dolls

I saw that from a rectangular image they are producing a roundish shaped one using a whole bunch of HTML and CSS and a mix of divs, sgv, etc . Can somebody point to the right direction in order to achieve this with a more readable CSS

I have uploaded the sample I’ve got here .

Use a clip path on the image.

I suck at making them manually, so I typically use a site like https://bennettfeely.com/clippy/

This took about 30 seconds. Obviously not right, but gives you the basic idea of what can be done.

2 Likes

Anytime I need an odd shape image I simply use a png with a transparent background.
The browser will see it as a square image but only show the part that is not transparent.

A PNG file of a photographic image is likely to be much larger than a JPG file of the same image. Especially for large images, the use of clip path is likely to be preferable. (unless partial transparency is required).

2 Likes

Hi, not OP but what if you can is clip path. As stated have not done much web stuff lately. Will again in 2.5 years.

Edit, I found your link. Did not know that kind of stuff was available in css.

Guess in 2 years I will need new book.