Using QML OpacityMask to round off upper corners of overlayed rectangle

Question

I am trying to create a rounded rectangle, with the top portion filled with a solid color, and lower portion filled with text. I am overlaying the upper portion of the rounded rectangle (outerRectangle in white with black border) with another rectangle (innerTopRectangle in red). However, instead of rounding off the top of my innerTopRectangle, it's rounding off the BOTTOM corners:

I wanted innerTopRectangle to be rounded off at the top (clipped and within the outerRectangle border), but flat on the bottom.

Can someone suggest what's wrong? Logically my opacitymask top should anchor to my innerTopRectangle I think, and since innerTopRectangle is not as tall only the top corners should be masked.

Rectangle {
    id: outerRectangle
    width: (parent.width / 2) - 5 - 10;
    height: 40
    anchors.margins: 10
    border {
        width: 2
        color: "#120e0d"
    }
    clip: true
    radius: 5
    Rectangle {
        id: innerTopRectangle
        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
        }
        layer.enabled: true
        layer.effect: OpacityMask {
            anchors.top: outerRectangle.top
            maskSource: outerRectangle
        }
        height: parent.height - levelName.height
        color: "red"
    }  // Inner top rectable


    Text {
        id: levelName
        anchors {
            top: innerTopRectangle.bottom
            left: parent.left
            right: parent.right
        }
        text: name
    }  // Text
}  // Outer rectangle

Answer 1

I think you can achieve what you want pretty easily without an OpacityMask at all since the top portion is a simple solid color You just need to add a radius to innerTopRectangle, and then draw another (non-rounded) rectangle on its bottom edge to cover the rounded corners there. I got rid of the clipping too because that wasn't necessary.

    Rectangle {
        id: outerRectangle
        width: (parent.width / 2) - 5 - 10;
        height: 40
        anchors.margins: 10
        border {
            width: 2
            color: "#120e0d"
        }
        radius: 5
        Rectangle {
            id: innerTopRectangle
            anchors {
                top: parent.top
                left: parent.left
                right: parent.right
            }
            radius: 5
            height: parent.height - levelName.height
            color: "red"

            Rectangle
            {
                // This covers the bottom rounded corners
                anchors.bottom: parent.bottom
                width: parent.width
                height: parent.radius
                color: parent.color
            }
        }  // Inner top rectable


        Text {
            id: levelName
            anchors {
                top: innerTopRectangle.bottom
                left: parent.left
                right: parent.right
            }
            text: name
        }  // Text
    }  // Outer rectangle