[FIXED] How to make an Angled arrow style border in PyQt5?

Issue

How to make an Angled arrow-type border in PyQt QFrame? In My code, I Have two QLabels and respective frames. My aim is to make an arrow shape border on right side of every QFrame.For clear-cut idea, attach a sample picture.

import sys
from PyQt5.QtWidgets import *

class Angle_Border(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("Angle Border")

        self.lbl1 = QLabel("Python")
        self.lbl2 = QLabel("PyQt")

        self.frame1 = QFrame()
        self.frame1.setProperty("type","1")
        self.frame1.setFixedSize(200,50)
        self.frame1.setStyleSheet("background-color:red;color:white;"
                                  "font-family:Trebuchet MS;font-size: 15pt;text-align: center;"
                                  "border-top-right-radius:25px solid ; border-bottom-right-radius:25px solid ;")
        self.frame2 = QFrame()
        self.frame2.setFixedSize(200, 50)
        self.frame2.setStyleSheet("background-color:blue;color:white;"
                                  "font-family:Trebuchet MS;font-size: 15pt;text-align: center;"
                                  "border-top:1px solid transparent; border-bottom:1px solid  transparent;")
        self.frame_outer = QFrame()
        self.frame_outer.setFixedSize(800, 60)
        self.frame_outer.setStyleSheet("background-color:green;color:white;"
                                  "font-family:Trebuchet MS;font-size: 15pt;text-align: center;")

        self.frame1_layout = QHBoxLayout(self.frame1)
        self.frame2_layout = QHBoxLayout(self.frame2)
        self.frame_outer_layout = QHBoxLayout(self.frame_outer)
        self.frame_outer_layout.setContentsMargins(5,0,0,0)

        self.frame1_layout.addWidget(self.lbl1)
        self.frame2_layout.addWidget(self.lbl2)

        self.hbox = QHBoxLayout()
        self.layout = QHBoxLayout()
        self.hbox.addWidget(self.frame1)
        self.hbox.addWidget(self.frame2)
        self.hbox.addStretch()
        self.hbox.setSpacing(0)
        # self.layout.addLayout(self.hbox)
        self.frame_outer_layout.addLayout(self.hbox)
        self.layout.addWidget(self.frame_outer)

        self.setLayout(self.layout)

def main():
    app = QApplication(sys.argv)
    ex = Angle_Border()
    ex.show()
    sys.exit(app.exec_())

if __name__ == '__main__':
    main()

Sample Picture

Solution

Since the OP didn't ask for user interaction (mouse or keyboard), a possible solution could use the existing features of Qt, specifically QSS (Qt Style Sheets).

While the currently previously accepted solution does follow that approach, it's not very effective, most importantly because it's basically "static", since it always requires knowing the color of the following item in order to define the "arrow" colors.
This not only forces the programmer to always consider the "sibling" items, but also makes extremely (and unnecessarily) complex the dynamic creation of such objects.

The solution is to always (partially) "redo" the layout and update the stylesheets with the necessary values, which consider the current size (which shouldn't be hardcoded), the following item (if any) and carefully using the layout properties and "spacer" stylesheets based on the contents.

The following code uses a more abstract, dynamic approach, with basic functions that allow adding/insertion and removal of items. It still uses a similar QSS method, but, with almost the same "line count", it provides a simpler and much more intuitive approach, allowing item creation, deletion and modification with single function calls that are much easier to use.

A further benefit of this approach is that implementing "reverse" arrows is quite easy, and doesn't break the logic of the item creation.

Considering all the above, you can create an actual class that just needs basic calls such as addItem() or removeItem().

from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

class ArrowMenu(QWidget):
    vMargin = -1
    hMargin = -1
    def __init__(self, items=None, parent=None):
        super().__init__(parent)
        layout = QHBoxLayout(self)
        layout.setContentsMargins(0, 0, 0, 0)
        layout.setSpacing(0)
        layout.addStretch()
        self.items = []
        if isinstance(items, dict):
            self.addItems(items.items())
        elif items is not None:
            self.addItems(items)

    def addItems(self, items):
        for item in items:
            if isinstance(item, str):
                self.addItem(item)
            else:
                self.addItem(*item)

    def addItem(self, text, background=None):
        self.insertItem(len(self.items), text, background)

    def insertItem(self, index, text, background=None):
        label = QLabel(text)
        if background is None:
            background = self.palette().window().color()
            background.setAlpha(0)
        else:
            background = QColor(background)

        # human eyes perceive "brightness" in different ways, let's compute
        # that value in order to decide a color that has sufficient contrast
        # with the background; see https://photo.stackexchange.com/q/10412
        r, g, b, a = background.getRgbF()
        brightness = r * .3 + g * .59 + b * .11
        foreground = 'black' if brightness >= .5 else 'white'

        label.setStyleSheet('color: {}; background: {};'.format(
            foreground, background.name(background.HexArgb)))

        layout = self.layout()
        if index < len(self.items):
            i = 0
            for _label, _spacer, _ in self.items:
                if i == index:
                    i += 1
                layout.insertWidget(i * 2, _label)
                layout.insertWidget(i * 2 + 1, _spacer)
                i += 1

        layout.insertWidget(index * 2, label)
        spacer = QWidget(objectName='menuArrow')
        layout.insertWidget(index * 2 + 1, spacer)
        self.items.insert(index, (label, spacer, background))
        self.updateItems()

    def removeItem(self, index):
        label, spacer, background = self.items.pop(index)
        label.deleteLater()
        spacer.deleteLater()
        layout = self.layout()
        for i, (label, spacer, _) in enumerate(self.items):
            layout.insertWidget(i * 2, label)
            layout.insertWidget(i * 2 + 1, spacer)
        self.updateItems()
        self.updateGeometry()

    def updateItems(self):
        if not self.items:
            return

        size = self.fontMetrics().height()
        if self.vMargin < 0:
            vSize = size * 2
        else:
            vSize = size + self.vMargin * 2
        spacing = vSize / 2
        self.setMinimumHeight(vSize)
        if self.hMargin >= 0:
            labelMargin = self.hMargin * 2
        else:
            labelMargin = size // 2

        it = iter(self.items)
        prevBackground = prevSpacer = None
        while True:
            try:
                label, spacer, background = next(it)
                label.setContentsMargins(labelMargin, 0, labelMargin, 0)
                spacer.setFixedWidth(spacing)

            except StopIteration:
                background = QColor()
                break

            finally:
                if prevBackground:
                    if background.isValid():
                        cssBackground = background.name(QColor.HexArgb)
                    else:
                        cssBackground = 'none'
                    if prevBackground.alpha():
                        prevBackground = prevBackground.name(QColor.HexArgb)
                    else:
                        mid = QColor(prevBackground)
                        mid.setAlphaF(.5)
                        prevBackground = '''
                            qlineargradient(x1:0, y1:0, x2:1, y2:0,
                            stop:0 {}, stop:1 {})
                        '''.format(
                            prevBackground.name(QColor.HexArgb), 
                            mid.name(QColor.HexArgb), 
                            )
                    prevSpacer.setStyleSheet('''
                        ArrowMenu > .QWidget#menuArrow {{
                            background: transparent;
                            border-top: {size}px solid {background};
                            border-bottom: {size}px solid {background};
                            border-left: {spacing}px solid {prevBackground};
                        }}
                    '''.format(
                            size=self.height() // 2, 
                            spacing=spacing, 
                            prevBackground=prevBackground, 
                            background=cssBackground
                    ))

                prevBackground = background
                prevSpacer = spacer

    def resizeEvent(self, event):
        self.updateItems()


if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)
    items = (
            ('Python', 'green'), 
            ('Will delete', 'chocolate'), 
            ('PyQt5', 'red'), 
            ('Java', 'blue'), 
            ('ASP.Net', 'yellow'), 
        )
    ex = ArrowMenu(items)
    ex.show()
    QTimer.singleShot(2000, lambda: ex.addItem('New item', 'aqua'))
    QTimer.singleShot(5000, lambda: ex.removeItem(1))
    sys.exit(app.exec_())

And here is the result:

Answered By - musicamante