Grow your CSS skills. Land your dream job.

Cut portion of an image dynamically

  • # February 14, 2013 at 4:46 am

    Hello!

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

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

    Thanks!

    # February 14, 2013 at 5:10 am

    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.

    # February 14, 2013 at 5:16 am

    Thanks Paulie_D, however,

    border-top:75px solid white;

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

    # February 14, 2013 at 5:20 am

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

    # February 14, 2013 at 5:22 am

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

    # February 14, 2013 at 5:28 am

    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?

    # February 14, 2013 at 5:32 am

    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.

    # February 14, 2013 at 5:56 am

    @Paulie_D it is possible… :) If you got too much time to align things (like me) I’ve made a demo here:

    http://codepen.io/CrocoDillon/pen/vxHey

    Using transforms and hidden overflow to cut out the corner (IE9+).

    # February 14, 2013 at 6:15 am

    @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.

    # February 19, 2013 at 9:13 pm

    Big ups to @CrocoDillon

    Saved for future use, will credit you :)

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".