Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Cutting image dinamically

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #247591
    Ayala
    Participant

    How can I do this (cuting the image) dinamically?
    I mean if I put an other picture with different size, I want the same cutting.
    It is possible in CSS?

    So:

    .imgdiv:before {
    position: absolute;
    width: 0;
    height: 0;
    content: “”;
    border-top: 450px solid white; —-> it depend on the size of the picture, i would like to write here that “100%” this is what I want, but it is not valid.
    border-right: 50px solid transparent;

    }

    http://codepen.io/Ayalann/pen/MbYMZG

    #247618
    Shikkediel
    Participant

    You could give this a try:

    .imgdiv:before {
      content: "";
      width: 7%;
      height: 100%;
      position: absolute;
      background: white;
      -webkit-transform: translate(-100%) skew(-7deg);
      transform: translate(-100%) skew(-7deg);
      -webkit-transform-origin: 100% 100%;
      transform-origin: 100% 100%;
    }
    
    #247626
    Shikkediel
    Participant

    Or something in that direction…

    Link

    #247631
    Ayala
    Participant

    Wow! I love this solution, thank you!

    #247644
    Shikkediel
    Participant

    Cheers. Just keep in mind that if the largest image is relatively very high, the pseudo element will likely need to be a bit wider (than the current 10%)… or it might not fully cover the left top of the image.

    #247661
    Ayala
    Participant

    But if I have a triangle, I don’t have this problem.
    Can you solve it with a triangle?

    #247663
    Shikkediel
    Participant

    Well… not with a transform that I can think of (someone else might) but another approach is to use a clip-path. Inside an SVG (not through CSS) is preferable because that has pretty good support.

    Example

    The triangle (in fact, the polygon describes everything but the triangle) is responsive to the image but unfortunately the SVG itself is not because a width and height have to be given for it to show correctly.

    Maybe another member has some more trickery up their sleeve when it comes to this.

    #247664
    Ayala
    Participant

    Look: an other solution:
    http://codepen.io/Ayalann/pen/ENVZzp

    It is beautiful :)

    #247665
    Shikkediel
    Participant

    Not too shabby indeed. ;-)

    #247672
    Shikkediel
    Participant

    Too bad I didn’t think of it though. :-D

    #247675
    Ayala
    Participant

    I was suprised when I see this solution, it is so simple.
    At least now you’ve learned as well :)

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.