Skip to main content

Forums

This topic contains 12 replies, has 5 voices, and was last updated by  paulob 4 years, 11 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #173609

    lorentracy
    Participant

    I’m wondering how to accomplish a mask like the following:

    http://canary.is/how-it-works/

    How would you program the little carrot arrow pointing down that extends that first image? What if the white area that the carrot is “cut out” of was another image? Any help would be greatly appreciated.

    #173675

    lorentracy
    Participant

    Thanks for the replies. I believe what I am trying to achieve may be a bit more complicated than masking the bottom of the image with a solid color because below the image will be another image. Here is a screen shot:

    Any idea how to actually mask the top div that has the light background pattern?

    Thanks!

    #173676

    Paulie_D
    Moderator

    That one is even easier and only requires one pseudo element

    #173677

    lorentracy
    Participant

    Hey Paulie_D

    Would you be able to elaborate on that?

    Thanks!

    #173723

    Paulie_D
    Moderator

    Yeah…sorry, I was away from my laptop

    #173734

    paulob
    Participant

    Hi,

    I think that the problem is more complicated than that as the OP seems to want that the arrow is a continuation of the image or background above and not just a colour match as such. If the background is a solid colour then its no problem but if the background is an image or a pattern then its not so easy to achieve.

    Here’s a codepen example that only works in webkit but I believe this is the effect required.

    http://codepen.io/paulobrien/full/aGnpk/

    Of course the simple way to do it would be to make transparent triangle images that match the end of the image above but would be a pain to create.

    There’s a nice example here of clippath and svg here:
    http://labs.sawyerhollenshead.com/lab/svg-clippath/

    #173738

    Paulie_D
    Moderator

    the OP seems to want that the arrow is a continuation of the image or background above and not just a colour match as such

    That’s not my reading of the requirement, given the images he’s provided

    Wolfcry’s pen covered what I thought he was after.

    Or there is this.

    I see what you are saying about one image following another though.

    #173743

    paulob
    Participant

    That’s not my reading of the requirement, given the images he’s provided

    See the image in post 4 where the arrow is a continuation of the textured background and sits on top of the image that follows. Wolfcry’s example would not work like this as it simply rubs out the bottom of the image with a white background and should another image follow immediately it will be rubbed out and have a white gap.

    At least that’s how I saw it :)

    #173744

    Paulie_D
    Moderator

    Ah, yes, I couldn’t see the ‘texture’ on my monitor until I zoomed in….a lot.

    Then you are right. Webkit-only at the moment.

    #173751

    paulob
    Participant

    Here’s a version that works in modern browsers Firefox, IE, Chrome (ones that understand transform and rotate).

    http://codepen.io/paulobrien/full/zvpCd/

    It’s a little bit too fiddly for real world usage but maybe someone can improve on it. :)

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star