How to draw a triangle shaped UIButton

问题

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!

回答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:

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

来源：https://stackoverflow.com/questions/30315337/how-to-draw-a-triangle-shaped-uibutton