I’m trying to create a top trailing triangle filled with a gradient color (pink and yellow) to look exactly like this prototype:
What I already did is this shape:
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.midX, y: rect.maxY))
path.addLine(to: CGPoint(x: rect.minX, y: rect.minY))
path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
return path
}
}
and I just drop it in the content view like this:
GeometryReader { geometry in
Triangle()
.fill( LinearGradient(gradient: Gradient(colors: [Color.yellow.opacity(0.5), Color.pink.opacity(0.5)]),
startPoint: .topTrailing,
endPoint: .bottomLeading
)
)
.frame(width: geometry.size.width * 1.65, height: 210)
.position(x: geometry.size.width, y: 105)
}
.edgesIgnoringSafeArea(.all)
but the result is this:
Any suggestions to achieve a similar prototype is appreciated.
EDIT:
adding .blur(radius: 100) after the .fill modifier will achieve a very close result.






