CSS Div Masks

[lorentracy]

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.

[lorentracy]

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:

http://imgur.com/COXt3s4

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

Thanks!

[Paulie_D]

That one is even easier and only requires one pseudo element

[lorentracy]

Hey Paulie_D

Would you be able to elaborate on that?

Thanks!

[Paulie_D]

Yeah…sorry, I was away from my laptop

http://codepen.io/Paulie-D/pen/unsLJ

[paulob]

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/

[Paulie_D]

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.

http://codepen.io/Paulie-D/pen/ihFgz

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

[paulob]

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 :)

[Paulie_D]

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.

[paulob]

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. :)

[Author]

Posts