Confining background color to Triangular tab on QTabBar

Question

I set up a QTabWidget using the Qt Designer and selected "Triangular" tabs instead of the "Rounded" tabs for the tabShape. I wanted the non selected tabs to be green. An answer from one of my prior questions https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qtabwidget-and-qtabbar provided me the solution. However, the background colors were outside the triangular tab's shape, like this:

Looking on the internet, I found this, which is what I desire:

How would I modify the following code to keep the color within the border of the triangular tab?

self.ui.tabWidget.setStyleSheet(self.ui.tabWidget.styleSheet()
                                            + 'QTabBar::tab:!selected:hover {'
                                              ' border: 2px solid #1e90ff;'
                                              ' background-color: green; }' )

S. Nick S. Nick · Accepted Answer · 2020-01-05T00:03:03

Try it:

import sys
from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(440, 400)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.verticalLayout = QtWidgets.QVBoxLayout(self.centralwidget)
        self.verticalLayout.setObjectName("verticalLayout")
        self.qtabwidget = QtWidgets.QTabWidget(self.centralwidget)
        self.qtabwidget.setObjectName("qtabwidget")
        self.tab = QtWidgets.QWidget()
        self.tab.setObjectName("tab")
        self.qtabwidget.addTab(self.tab, "")
        self.tab_2 = QtWidgets.QWidget()
        self.tab_2.setObjectName("tab_2")
        self.qtabwidget.addTab(self.tab_2, "")
        self.verticalLayout.addWidget(self.qtabwidget)
        MainWindow.setCentralWidget(self.centralwidget)

        self.retranslateUi(MainWindow)
        self.qtabwidget.setCurrentIndex(0)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "Change the shape of the tabs of a QTabWidget"))
        self.qtabwidget.setTabText(self.qtabwidget.indexOf(self.tab), _translate("MainWindow", "Tab 1"))
        self.qtabwidget.setTabText(self.qtabwidget.indexOf(self.tab_2), _translate("MainWindow", "Tab 2"))


class Window(QtWidgets.QMainWindow, Ui_MainWindow):
    def __init__(self):
        super().__init__()
        self.setupUi(self)

        self.tab_3 = QtWidgets.QWidget()
        self.tab_3.setObjectName("tab_3")
        self.qtabwidget.addTab(self.tab_3, "Tab 3")

        # changes the shape of the tabs of the QTabWidget
        tab_shape = QtWidgets.QTabWidget.Triangular
        self.qtabwidget.setTabShape(tab_shape)


StyleSheet = '''
QTabWidget {
    background-color: green;
}
QTabWidget::pane {
    border: 1px solid #31363B;
    padding: 2px;
    margin:  0px;
}
QTabBar {
    border: 0px solid #31363B;
    color: yellow;
}
QTabBar::tab:top:selected {
    color: red;
}
'''


if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    app.setStyleSheet(StyleSheet)
    app.setFont(QtGui.QFont("Times", 12, QtGui.QFont.Bold))
    w = Window()
    w.show()
    sys.exit(app.exec_())

Confining background color to Triangular tab on QTabBar

1 Answers