Thane Brimhall Thane Brimhall - 1 year ago 91
iOS Question

How can I make angled corners on a UIView?

There's LOTS of questions on here about making a

's corners rounded. Unfortunately I can't find anything for how to make angled corners. How can I make a
with corners cut at a 45 degree angle instead?

You can even have a bonus (figurative) gold star if you can show me how to make any individual corner cut at an angle.

Edit: For reference, here's a link to a question that I suspect has a similar implementation to this solution. I just don't know what I'd have to change.

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download