UIView单角斜切边框问题：透明背景下边框异常求解决方案

问题出在你用layer.mask裁剪视图后，layer.border仍是基于视图原始矩形边界绘制的——mask仅隐藏视图内容，不会改变边框的形状，所以透明背景下会显示出多余的矩形边框部分。

正确的做法是直接用CAShapeLayer绘制带边框的自定义路径，替代原有的mask和layer.border方案：

class PointedView: UIView { // 仅需自定义形状时，用UIView比UIImageView更轻量化
    @IBInspectable var borderColor: UIColor = .clear {
        didSet {
            shapeLayer.strokeColor = borderColor.cgColor
        }
    }
    
    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            shapeLayer.lineWidth = borderWidth
            updatePath() // 边框宽度变化时需重新计算路径
        }
    }
    
    @IBInspectable var fillColor: UIColor = .clear {
        didSet {
            shapeLayer.fillColor = fillColor.cgColor
        }
    }
    
    @IBInspectable var slopeFactor: CGFloat = 15 {
        didSet {
            updatePath()
        }
    }
    
    private let shapeLayer: CAShapeLayer = {
        let layer = CAShapeLayer()
        layer.lineJoin = .round // 可选，让边角过渡更平滑
        return layer
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupLayer()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupLayer()
    }
    
    private func setupLayer() {
        backgroundColor = .clear // 保持视图背景透明
        layer.addSublayer(shapeLayer)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        shapeLayer.frame = bounds
        updatePath()
    }
    
    private func updatePath() {
        // 计算边框内边距：描边是居中绘制的，避免部分边框超出视图范围被裁切
        let inset = borderWidth / 2
        let adjustedBounds = bounds.insetBy(dx: inset, dy: inset)
        
        let path = UIBezierPath()
        // 沿用你原有的路径逻辑，基于调整后的边界绘制
        path.move(to: CGPoint(x: adjustedBounds.minX, y: adjustedBounds.maxY))
        path.addLine(to: CGPoint(x: adjustedBounds.minX, y: adjustedBounds.minY))
        path.addLine(to: CGPoint(x: adjustedBounds.maxX, y: adjustedBounds.minY))
        path.addLine(to: CGPoint(x: adjustedBounds.maxX, y: (adjustedBounds.maxY*3)/4 + 20))
        path.addLine(to: CGPoint(x: (adjustedBounds.maxX*3)/4, y: adjustedBounds.maxY))
        path.close()
        
        shapeLayer.path = path.cgPath
    }
}

关键改动说明： #

• 移除layer.mask，直接用CAShapeLayer同时实现自定义形状的填充和边框描边
• 新增fillColor属性替代原视图背景色，保持视图本身背景透明
• 处理边框内边距，避免描边因居中绘制被视图边界裁切
• 简化父类为UIView（如果不需要图片展示功能，更合理）

这样设置透明背景+边框时，边框会完全贴合自定义斜切路径，不会出现多余的矩形边框部分。

内容的提问来源于stack exchange，提问作者David Mempin