We'll create a rounded rectangle with a triangular point that is at the centre left.
Create a background
on your View
that has a ZStack
with centre leading alignment. The ZStack
will have three views.
The first view is a RoundedRectangle
with a stroke and a white background.
The second view is a Rectangle
with a 1px stroke that's rotated 45 degrees and offset slightly to the left to create the point.
The final Rectangle
is the same as the second, without the stroke but with a white fill, and offset 1 further to the right to erase the right-hand border of the second Rectangle
.
ZStack(alignment: .topLeading) {
Text("Popover")
.font(.system(size: 30.0))
.padding(.all, 5)
}
.background {
ZStack(alignment: .init(horizontal: .leading, vertical: .center)) {
RoundedRectangle(cornerRadius: 10)
.stroke(Color.gray, lineWidth: 1)
.overlay {
RoundedRectangle(cornerRadius: 10)
.fill(Color.white)
}
Rectangle()
.strokeBorder(.gray, lineWidth: 1.0)
.background(.white)
.frame(width: 20, height: 20)
.rotationEffect(.degrees(45.0))
.offset(x: -10, y: 0)
Rectangle()
.fill(.white)
.frame(width: 20, height: 20)
.rotationEffect(.degrees(45.0))
.offset(x: -9, y: 0)
}