I was wondering if anyone knew a way to do this:
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.
Thanks Paulie_D, however,
border-top:75px solid white;
Needs to have it transparent and it doesn’t seem to work that way.
>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.
I’m putting it in a corner where there’s already a border image, so it isn’t a solid color.
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?
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 it is possible… :) If you got too much time to align things (like me) I’ve made a demo here:
Using transforms and hidden overflow to cut out the corner (IE9+).
@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.
Big ups to @CrocoDillon
Saved for future use, will credit you :)
You must be logged in to reply to this topic.