QT 5.7 QML fast translucent rounded rectangle on one side

Question

I want a translucent rectangular shape using Qt Quick QML, but with rounded corners on only one side.

This is the kind of rectangle shape I want. If it weren’t visible, I would probably just overlap 2 rectangles, one with rounded corners and one without. However, this does not work with transparency, since the overlap becomes darker.

     ----------|
   /           |
 /             | 
|              |
|              |
|              |
 \             | 
   \           |   
     ----------|

Does anyone have any ideas?

Answer 1

(. docs), :

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    width: 300
    height: 300
    visible: true

    Item {
        width: 100
        height: 100
        anchors.centerIn: parent
        clip: true

        Rectangle {
            anchors.fill: parent
            anchors.rightMargin: -radius
            radius: 10
            color: "navajowhite"
            opacity: 0.5
        }
    }
}

, :

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    width: 300
    height: 300
    visible: true

    Item {
        width: 100
        height: 100
        opacity: 0.5
        layer.enabled: true
        anchors.centerIn: parent

        Rectangle {
            color: "navajowhite"
            radius: 10
            anchors.fill: parent
        }
        Rectangle {
            color: "navajowhite"
            anchors.fill: parent
            anchors.leftMargin: 10
        }
    }
}

@folibis, Canvas, .