How to make the lower right corner sharp as shown in the below image?

Below is my current code:

struct Test123: View {
    var body: some View {
        Text("Hello, World!")
            .foregroundColor(.white)
            .frame(width: 200, height: 50)
            .background(Color.black)
    }
}

CodePudding user response：

The possible solution is by using .clipShape by preparing any custom shape you want.

Here a demo (prepared with Xcode 13 / iOS 15)

struct SharpShape: Shape {

    func path(in rect: CGRect) -> Path {
        Path { path in
                let chunk = rect.height * 0.5
            path.move(to: .zero)
            path.addLine(to: CGPoint(x: rect.width, y: 0))
            path.addLine(to: CGPoint(x: rect.width, y: chunk))
            path.addLine(to: CGPoint(x: max(rect.width - chunk, rect.width / 2), y: rect.height))
            path.addLine(to: CGPoint(x: 0, y: rect.height))
        }
    }
}

struct Test123: View {
    var body: some View {
        Text("Hello, World!")
            .foregroundColor(.white)
            .frame(width: 200, height: 50)
            .background(Color.black)
            .clipShape(SharpShape())

    }
}