Create a triangular-tipped Listview in Javafx application

Question

I am developing a Javafx application, and I want to make a menu from a Listview, which will be triggered from a button pressed, but I would like to put a triangular tip at the top of this menu as the image I sent, but I could not via CSS. How can I make a Listview similar to the image??

Answer 1

There are some classes that can help with this, they are Line, Polygon and Canvas.
It’s a little complicated but there’s an example using the class Line.

/*O construtor da classe Line recebe 4 parâmetros opcionais, 
eles correspondem as coordenadas 'x' e 'y', os dois primeiros onde começa a linha,  
os dois ultimos onde termina a linha.  
Você terá que criar duas linhas, onde uma terminar a outra vai começar.
Supondo que sua ListView tenha uma largura de 400px, para o triângulo ficar
ficar mais ou menos no centro você pode fazer assim:*/

Line line1 = new Line(175, 50, 200, 0);//startX = 175, startY = 50, endX = 200, endY = 0
Line line2 = new Line(200, 0, 225, 50);//startX = 200, startY = 0, endX = 225, endY = 50
// coloque dentro de um HBox
HBox hbox = new HBox();
hbox.getChildren().addAll(line1, line2);
//centralize as linhas no hbox
hbox.setAlignment(Pos.CENTER);
//depois coloque o hbox e a listview dentro de um VBox
VBox vbox = new VBox();
vbox.getChildren().addAll(hbox, listview);

It may not be the best way, but it’s an option.

Coordinate system: https://en.wikipedia.org/wiki/Cartesian_coordinate_system