Changing shape of UIButton to triangle is need to use UIBezierPath not frame. UIBezierPath can draw a figure with concat some points. By Configuring three points and connect it, we can writing triangle. Sample code is here.

Sample code

class TriangleButton: UIButton {

    private let bezierPath = UIBezierPath()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }

    private func setup() {
        bezierPath.move(to: CGPoint(x: bounds.width, y: 0))
        bezierPath.addLine(to: CGPoint(x: bounds.width, y: bounds.height))
        bezierPath.addLine(to: CGPoint(x: 0, y: 0))
        bezierPath.close()
    }

    override func draw(_ rect: CGRect) {
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = bezierPath.cgPath
        layer.mask = shapeLayer
    }

    override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
        if bezierPath.contains(point) {
            return self
        }
        return nil
    }

}

In setup(), designate vertex and connect to each other. bezierPath.move(to:) set first point and bezierPath.addLine(to:) write line to connect each vertex. bezierPath.close() connect first point and last point. hitTest decide whether triangle area contain touch point or not. if not contain it, touch action is ignored and pass to next view.