Cut portion of an image dynamically

[TylerNYC]

Hello!

I was wondering if anyone knew a way to do this:

http://i.minus.com/jbjqzrW7477Dwi.png

Thanks!

[Paulie_D]

You can do it with wrapping element and a pseudo element – http://codepen.io/anon/pen/DCasv

However, it will only work with specific widths…at least as far I can see.

[TylerNYC]

Thanks Paulie_D, however,

border-top:75px solid white;

Needs to have it transparent and it doesn’t seem to work that way.

[Paulie_D]

>Needs to have it transparent and it doesn’t seem to work that way.

Why? You can change it to match the background color if that’s an issue. If you make the top border transparent, the image will show through.

[TylerNYC]

I’m putting it in a corner where there’s already a border image, so it isn’t a solid color.

[Paulie_D]

Then the answer is basically….No. You can’t make PART of an element transparent….at least as far as I can tell.

I really need to see what this is supposed to look like. You have an image on top of an image?

[TylerNYC]

That’s what I ended up doing…I cut out my border image to make a block that contains the outside color, the border image and the container color.

Then I made the container color transparent in the image and I am overlaying the image with it and match the margins so that it looks fluid.

[Paulie_D]

@CrocoDillon You’ve certainly come up with an innovative solution.

I still maintain you can’t make PART of an element transparent although I’d love to see if it was possible.

[TylerNYC]

Big ups to @CrocoDillon

Saved for future use, will credit you :)

[Author]

Posts