Divide Rectangle with slanted divider with different views on each side? - swiftui

Question

I am trying to split a rectangle into two sides with a slanted divider with background web images like this:
I tried using a triangle but having trouble dividing it in the correct direction and angle. Below is my working code I'm trying:
struct ContentView: View {
var body: some View {
VStack {
VStack {
Text("VS")
.bold()
.padding(4)
.background(.thinMaterial.opacity(0.8))
.clipShape(Circle())
}
.frame(maxWidth: .infinity, minHeight: 100)
.padding()
.background(
AsyncImage(url: URL(string: "https://picsum.photos/id/1037/1600/400"), transaction: Transaction(animation: .easeInOut)) { phase in
switch phase {
case .empty:
ProgressView()
case let .success(image):
image
.resizable()
.scaledToFill()
.frame(maxWidth: .infinity)
.transition(.opacity)
default:
Color.red
.transition(.opacity)
}
}
.overlay(
AsyncImage(url: URL(string: "https://picsum.photos/id/1041/1600/400"), transaction: Transaction(animation: .easeInOut)) { phase in
switch phase {
case .empty:
ProgressView()
case let .success(image):
image
.resizable()
.scaledToFill()
.frame(maxWidth: .infinity)
.transition(.opacity)
default:
Color.blue
.transition(.opacity)
}
}
.clipShape(Triangle())
)
)
.cornerRadius(4)
}
.padding()
}
}
struct Triangle: Shape {
func path(in rect: CGRect) -> Path {
var path = Path()
path.move(to: CGPoint(x: rect.maxX, y: rect.minY))
path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
return path
}
}
This is what it looks like:
How can I accomplish the "back-slash" divider like in my first screenshot?

Answer 1

You just need to adjust the points in your Triangle to fit the shape that you desire. If you look at each point you currently have, you'll see that it matches the shape that it draws.
By adjusting a couple of the points, you can get the desired result:
struct Triangle: Shape {
func path(in rect: CGRect) -> Path {
var path = Path()
path.move(to: CGPoint(x: rect.maxX * 0.33, y: rect.minY))
path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
path.addLine(to: CGPoint(x: rect.maxX * 0.66, y: rect.maxY))
return path
}
}