A banded rectangle

Question

I want to have a blue band over the top right end of the rounded rectangle in the following code. I have rotated the blue rectangle, but I am not sure how to place the blue rectangle correctly. The blue rectangle should be clipped to the round rectangle (not appear outside it). And the text in the blue rectangle should also be rotated with the rectangle so each letter flows down to the right.

Do anyone know how to do this?

struct MyCard: View {
    var body: some View {
        Rectangle()
            .foregroundColor(.white)
            .overlay(
                ZStack {
                    RoundedRectangle(cornerRadius: 6)
                        .stroke(.gray)
                    HStack(spacing: 40) {
                        Text("some text here")
                            .enigFont(style: .body1)
                        Rectangle()
                            .foregroundColor(Color(.brand(main: .blue)))
                            .frame(width: 20)
                            .overlay(
                                Text("hello")
                                    .foregroundColor(.yellow)
                                    .rotationEffect(.degrees(0))
                            )
                            .frame(maxWidth: .infinity, alignment: .trailing)
                            .rotationEffect(.degrees(315))
                        
                    }
                    .padding(.horizontal, 20)
                }
        )
    }
}

struct MyCard_Previews: PreviewProvider {
    static var previews: some View {
        MyCard()
            .padding(.horizontal, 40)
            .previewLayout(.fixed(width: 400, height: 150))
            .padding()
    }
}

Answer 1

This will give you a view that is a RoundedRectangle with a banner with text in the corner. You can layer anything else you want on top of it. I also made a quick extension because I needed to square some of it, and wanted cleaner code.

struct BanneredCard: View {
    let text: String
    let multiplier:CGFloat = 10
    
    var body: some View {
        GeometryReader { geometry in
            RoundedRectangle(cornerRadius: 6)
                .stroke(.gray)
                .overlay {
                    Rectangle()
                        .foregroundColor(Color.blue)
                        .overlay(
                            Text(text)
                                .foregroundColor(.yellow)
                        )
                        .frame(height: 20)
                        .rotationEffect(Angle(degrees: 45))
                        .offset(x: (geometry.size.width / 100).sqrd() * multiplier, y: -1 * (geometry.size.height / 100).sqrd() * multiplier)
                }
                .clipped()
        }
    }
}

extension CGFloat {
    func sqrd() -> CGFloat {
        self * self
    }
}