Set background color only partially with stylesheets

Question

How can I set the background color for a part of the background like in the following image:

Of course, without border frames, I want to set only the cyan color.

I need to set the length of the left part (cyan) as the percentage of the widget length, e.g 30%.

Answer 1

With css I would hack qlineargradient a little bit. Note that edge of cyan may be a little blurry.

QFrame
{
        background-color: qlineargradient(x1:0, x2: 1, stop: 0 cyan, stop: 0.29 cyan, stop: 0.2901 white, stop: 1 white);
}

Answer 2

If you want it hard-coded in the application, you can overload the paintEvent function in a widget. Something like this:

void MyWidget::paintEvent(QPaintEvent *event)
{
  QPainter painter(this);
  QPen pen(Qt::NoPen);
  painter.setPen(pen);
  painter.fillRect(0, 0, width(), height(), Qt::white);
  painter.fillRect(0, 0, 0.3*width(), height(), Qt::cyan);
  ...
}