Codename one Component Shapes

You can use an image background which is pretty simple or you can just define your own background painter etc. to draw the background of the component e.g.:

    int triangleWidth = convertToPixels(5);
    cmp.getUnselectedStyle().setBgPainter((g, rect) -> {
            g.setColor(cmp.getUnselectedStyle().getBgColor());
            g.fillRect(cmp.getX(), cmp.getY(), cmp.getWidth() - triangleWidth, hi.getHeight());
            g.fillTriangle(hi.getX() + cmp.getWidth(), cmp.getY(), 
                    cmp.getX() + cmp.getWidth() + triangleWidth, cmp.getY(),
                    cmp.getX() + cmp.getWidth(), cmp.getY() + hi.getHeight());
        }
    );

Note you can use fill(Shape) or fillPolygon() but I personally prefer the simpler APIs for these use cases but that's up to you.

You need to give the component enough padding so there will be room for the triangle to render otherwise it will crop or the text will run out. You can use css as usual for that.

int size = Math.round(Display.getInstance().getDisplayWidth());

 Label OrderNoField = new Label("P-092");
    OrderNoField.setUIID("white-label");
    Container Fieldbox = new Container(BoxLayout.x());
    Fieldbox.add(OrderNoField);
    
    Container PnoCnt = BoxLayout.encloseYCenter(Fieldbox);
    Style PnoCntStyle = PnoCnt.getAllStyles();
    PnoCntStyle.setBgTransparency(200);
    PnoCntStyle.setBgColor(0x7E57C2);
    PnoCntStyle.setPadding(1, 1, 1, 1);
    
    Image io = theme.getImage("triShape.png").scaled(size / 11, size / 11);;
    Label polygonAge = new Label();
    polygonAge.setIcon(io);
    
    
     Container toplayerd = BorderLayout.center(LayeredLayout.encloseIn(PnoCnt,
            FlowLayout.encloseRight(polygonAge)));
    
    Label orderStatus = new Label("Draft", "Status-red");
    
    Container topsCnt = GridLayout.encloseIn(2, toplayerd, BoxLayout.encloseXRight(BorderLayout.centerAbsolute(orderStatus)));

the bove code gave me this result that I was looking for