CSS challange

I got stuck a bit and hope there is someone who can help me here.

As you can see in the picture, the woman is inside something similar to a rotated triangle with border-radius.

  1. How can I create the triangle figure with css?
  2. How do I get the woman into the figure, and then create “a overflow hidden effect” only on the bottom part as in the picture? As you can see her head is popping out at the top

Basically, I want the same results as the picture

Best regards
Neo

It looks as though one image overlays at least one another image.

I would be tempted to first find the original image.

This may be useful in finding the original image:

2 Likes

It depends on what you want to achieve?

The easiest option is to modify your image in your paint package assuming the image isn’t going to change.

If you want to insert multiple un-cropped images into that design then it is a lot more complex.

You could drop a transparent png image on top of those circle segments but your image would need to be the right shape or you could shape the image with clip-path for modern browsers (not IE or edge).

You could probably get some sort of design going using border radius on the image to round the bottom and then dropping the image on top of some circle segments (which themselves could be absolutely placed into position under the image).

Which image (or images) are you using for the main image? Post the image you want to use and then someone may be able to doctor it for you :slight_smile:

Thanks for the replys.

I have the shape now, saved as an image…

When I add my person/image(png, transparent) over the shape it will overflow the shape on bottom left and bottom right. Is there any easy software/tool I can use to cut of the excess parts from the image/person so it looks like it’s within the shape??

Make a div slightly larger than the shape and use that shape image as the background image. Locate it where you want it with background-position.

Now you should be able to use clip-path on that div (or the image) to get your bottom rounded clip on the person.

4 Likes

Nice I’ll try that

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.