Clipping or Chamfering Corners of Image to See Background

.wrap {

  margin: 0 auto;

  max-width: 1000px;

  min-width: 660px;

  overflow: hidden;

  background: #EEE;

}

.wrap > div {

  transform: rotate(-15deg);

  height: 700px;

  width: 200%;

  overflow: hidden;

  transform-origin: 0 90%;

  position: relative;

  z-index: 10;

}

.wrap > div:before {

  content: '';

  display: block;

  width: 100%;

  height: 100%;

  background: url(http://lorempixel.com/output/food-q-c-1500-1000-2.jpg) no-repeat;

  transform: rotate(15deg);

  position: absolute;

  transform-origin: 30% 0;

}

.wrap > div:nth-child(n+2) {

  margin-top: -140px;

}

.wrap > div:nth-child(2):before {

  background-image: url(http://lorempixel.com/output/people-q-c-1500-1000-10.jpg);

}

.wrap > div:nth-child(3):before {

  background-image: url(http://lorempixel.com/output/technics-q-c-1500-1000-3.jpg);

}

.wrap > div:nth-child(2) {

  z-index: 9;

}

.wrap > div:nth-child(3) {

  z-index: 8;

}

<div class="wrap">

  <div></div>

  <div></div>

  <div></div>

</div>

How to draw a shape using a piece of image in php

Preprocessing the image is vital

Whether done manually by you, or on the fly somehow through a GD library, you absolutely at the least need to take the image you state you are receiving...

...and crop and tighten it to make it clean like this (with no white space around the edges and the notch/cut removed):

Then you have an image you can actually work with.

Otherwise, PURE CSS / JAVASCRIPT

NOTE: I am not doing the javascript here. It would be used to dynamically set the element sizing as seen in the html.

Normally I would use a judicious amount of :before and ':after' pseudo elements to keep the html less cluttered, but since you need dynamic sizing of the frame, then we need to use a number of nested div elements to set dynamic styles for widths and heights that are critical to some of the div elements (some of which would still be pseudo elements if javascript could access those or if dynamic sizing was not needed).

NOTE: So far I have only tested this in Chrome and Firefox. Really old browsers are for sure going to fail miserably.

/* implementation of framing */

    .frameit {

        /* width and height must be set dynamically by javascript see html */ 

        position: relative;

        box-sizing: border-box;

        overflow: hidden;

        padding: 20px; /* at least border size */

    }

    .frameit:before,

    .frameit:after,

    .frameit .sides > div,

    .frameit .corner > div {

        position: absolute;

        background-image: url(http://i.stack.imgur.com/vAgqj.jpg);

        background-size: 100% 20px; /* 100% and border size */

        height: 20px; /* equal to border width of frameit div */

    }

    .frameit:before {

        content: '';

        top: 0;

        left: 0;

        right: 0;

    }

    .frameit:after {

        content: '';

        bottom: 0;

        left: 0;

        right: 0;

    }

    .frameit .sides {

        position: absolute;

        top: 0;

        right: 0;

        bottom: 0;

        left: 0;

        z-index: 1;

    }

    .frameit .sides > div {

        /* width must be set dynamically by javascript see html */ 

        height: 20px;

    }

    .frameit .sides > div:first-child {

        top: 0;

        left: 20px; /* border width */

        transform-origin: 0 0;

        transform: rotate(90deg);

    }

    .frameit .sides > div:last-child  {

        bottom: 0;

        right: 20px; /* border width */

        transform-origin: 100% 100%;

        transform: rotate(90deg);

    }

    .frameit .sides ~ .corner { /* all corners */

        position: absolute;

        z-index: 2;

        width: 29px; /* square root of ((border-width squared) x 2) round up */

        height: 29px; /* match width */

        overflow: hidden;

    }

    .frameit .TL {

        top: 0;

        left: 0;

        transform-origin: 0 0;

        transform: rotate(-45deg);

    }

    .frameit .TL > div {

        top: inherit;

        left: inherit;

        transform-origin: inherit;

        transform: rotate(45deg);

    }

    .frameit .TR {

        top: 0;

        right: 0;

        transform-origin: 100% 0;

        transform: rotate(45deg);

    }

    .frameit .TR > div {

        top: 0;

        right: 0;

        transform-origin: 100% 0;

        transform: rotate(-45deg);

    }

    .frameit .BR {

        bottom: 0;

        right: 0;

        transform-origin: 100% 100%;

        transform: rotate(-45deg);

    }

    .frameit .BR > div {

       bottom: inherit;

       right: inherit;

       transform-origin: inherit;

       transform: rotate(45deg);

    }

    .frameit .BL {

        bottom: 0;

        left: 0;

        transform-origin: 0 100%;

        transform: rotate(45deg);

    }

    .frameit .BL > div {

        bottom: inherit;

        left: inherit;

        transform-origin: inherit;

        transform: rotate(-45deg);

    }

    /* Optional shading to help define the joint */

    .frameit .sides > div:first-child:before,

    .frameit .sides > div:last-child:before {

       content: '';

       position: absolute;

       top: 0;

       right: 0;

       left: 0;

       bottom: 0;

       background-color: rgba(0,0,0,.07);

    }

<div class="frameit" style="width: 200px; height: 300px;">

   <!-- top and bottom and overall container 

        width and height assumed to be set by javacript by user

   -->

   <div class="sides">

     <!-- left and right sides 

        widths of the children are equal to HEIGHT of container and are 

        assumed to be set by javacript by user

     -->

     <div style="width: 300px;"></div>

     <div style="width: 300px;"></div>

   </div>

   <div class="TL corner"><!-- top left bevel --><div style="width: 200px;"></div></div>

   <div class="TR corner"><!-- top right bevel --><div style="width: 200px;"></div></div>

   <div class="BR corner"><!-- bottom right bevel --><div style="width: 200px;"></div></div>

   <div class="BL corner"><!-- bottom left bevel --><div style="width: 200px;"></div></div>

</div>

How can I make angled corners on a UIView?

First you need a path with the angled corners:

- (CGPathRef) makeAnglePathWithRect: (CGRect)rect withSize:(float) s {

    CGPoint one = CGPointMake( rect.origin.x +s, rect.origin.y);
    CGPoint two = CGPointMake( rect.origin.x + rect.size.width - s, rect.origin.y);

    CGPoint three = CGPointMake( rect.origin.x + rect.size.width, rect.origin.y +s);
    CGPoint four = CGPointMake( rect.origin.x + rect.size.width, rect.origin.y + rect.size.height -s);

    CGPoint five = CGPointMake( rect.origin.x + rect.size.width-s, rect.origin.y + rect.size.height);
    CGPoint six = CGPointMake(rect.origin.x+s, rect.origin.y + rect.size.height);

    CGPoint seven = CGPointMake(rect.origin.x, rect.origin.y + rect.size.height-s);
    CGPoint eight = CGPointMake(rect.origin.x, rect.origin.y + s);

    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path,NULL,one.x, one.y);
    CGPathAddLineToPoint(path,NULL,two.x, two.y);
    CGPathAddLineToPoint(path,NULL,three.x, three.y);
    CGPathAddLineToPoint(path,NULL,four.x, four.y);
    CGPathAddLineToPoint(path,NULL,five.x, five.y);
    CGPathAddLineToPoint(path,NULL,six.x, six.y);
    CGPathAddLineToPoint(path,NULL,seven.x, seven.y);
    CGPathAddLineToPoint(path,NULL,eight.x, eight.y);
    CGPathAddLineToPoint(path,NULL,one.x, one.y);

    return path;
}

Then you need to use the path to specify a mask:

CAShapeLayer *maskLayer = [CAShapeLayer layer];
CGRect bounds = CGRectMake(0.0f, 0.0f, 100, 100); //figure out your bounds

[maskLayer setFrame:bounds];
CGPathRef p = [self makeAnglePathWithRect:bounds withSize:20.0];
maskLayer.path = p;
_myview.layer.mask = maskLayer;

If you want to remove the angles from any corner, fiddle with points one-eight, removing the "s" value. You can change the size of the triangles cut out of the corners with the size parameter.

Is it possible to create an angled corner in CSS?

It's a little difficult keeping the border, but I managed to achieve a close effect using :before and :after elements with a parent container (:before and :after don't work on an img tag)

1. Add a border to the container

2. Add a before to block out a corner and offset by -1 to cover the border

3. Add an after that's slightly offset from the before to create the line inside the cut off

As you can see, the thickness of the 45deg line is a bit of an issue:

.cutCorner {

    position:relative; background-color:blue; 

    border:1px solid silver; display: inline-block;

}

.cutCorner img {

    display:block;

}

.cutCorner:before {

    position:absolute; left:-1px; top:-1px; content:'';

    border-top: 70px solid silver;

    border-right: 70px solid transparent;

}

.cutCorner:after {

    position:absolute; left:-2px; top:-2px; content:'';

    border-top: 70px solid white;

    border-right: 70px solid transparent;

}

<div class="cutCorner">

    <img class="" src="https://www.google.co.uk/logos/doodles/2013/william-john-swainsons-224th-birthday-5655612935372800-hp.jpg" />

</div>

---

Related Topics