How do I ‘fill’ an element with an image that’s had a clip-path set on it?

Discussion in 'Web Design' started by TTS_Coder49, Oct 4, 2017.

  1. TTS_Coder49

    TTS_Coder49 New Member

    Joined:
    Sep 10, 2017
    Messages:
    6
    Likes Received:
    0
    When using clip-path: polygon () on an <img>, is there a way of having the parent element collapse to the edge of the clip, or make the image stretch out the other way towards its parent?

    I know I can do it to some extent with negative margins, but that feels awfully kludgy, and I can't help feeling there ought to be a better approach to it.

    The snippet below is the one I'm using and gets me the right section of the image, now I just need the edge of its parent to snuggle up to it.

    Code:
    .image-clip-right {
      clip-path: polygon(21% 95%, 80% 95%, 70% 14%, 21% 14%);
    }
     
  2. SteveSmoke

    SteveSmoke New Member

    Joined:
    Sep 12, 2017
    Messages:
    6
    Likes Received:
    0
    I'm not entirely sure what you mean. It maybe needs a working example or sketch.
    But going by my interpretation, you may be looking at it the wrong way around.
    What you are doing is effectively cropping the image, then wanting that cropped version to fill a space.
    So I'm thinking to keep the clipping path close to the element's edge and on a containing wrapper element, to fill the space you want.
    This of course, shows more of the image that you wanted to. To remedy that the image is scaled up with a transform which does not affect its size in the document flow, so the wrapper maintains the original image size.
     

Share This Page