How to draw a triangle shaped UIButton

Question

I really dig the IFTTT bottom right corner button, as shown in the image (bottom right).

I tried playing around with CGContext and UIBezierPath to match the effect, but i simply don't know enough to get this right. Does anyone have some thoughts/code on how to make this happen?

Thanks!

Answer 1

First use a CAShapeLayer to create a mask

CAShapeLayer * shapeLayer = [CAShapeLayer layer];
//Use these to create path
CGMutablePathRef path = CGPathCreateMutable();
// CGPathMoveToPoint
// CGPathAddLines
shapeLayer.path = path;

Then set mask of your button

yourbutton.layer.mask = shapeLayer
yourbutton.masksToBounds = YES;

Example of a view

  CAShapeLayer * shapeLayer = [CAShapeLayer layer];
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, nil, 0, CGRectGetHeight(self.testview.frame));
CGPathAddLineToPoint(path, nil, CGRectGetWidth(self.testview.frame), 0);
CGPathAddLineToPoint(path, nil, CGRectGetWidth(self.testview.frame), CGRectGetHeight(self.testview.frame));
CGPathCloseSubpath(path);
shapeLayer.path = path;
self.testview.layer.masksToBounds = YES;
self.testview.layer.mask = shapeLayer;

And screen shot:

Answer 2

Make a square button, put an image of triangle in it. Won't that work too? To make the illusion even better, draw separate images for onclick() event and ontouch(). Disable the default button press and button click animations to make it look real.