Cut Corners using JavaFX-CodePudding

I'm looking to "cut" the top left corner of a tab, like if you had folded the corner of a page down.

Are there any methods?

My code:

.tab:before {
-fx-position: absolute;
-fx-top: 0;
-fx-right: 0;
-fx-border-top: 300px solid white;
-fx-border-left: 200px solid red;
-fx-width: 0;
-fx-background-color: transparent;}

return:

.jar!/css/tabs.css: expected series of while parsing '-fx-border-top' at [9,20]

CodePudding user response：

Many of these properties are not supported: I don't know where you are getting them from.

There is no -fx-position, -fx-top, -fx-right property (in general, JavaFX CSS is used for style, not for layout).

There is no -fx-border-top or -fx-border-right property: border sizes are specified by -fx-border-width: top right bottom left syntax, and similarly border colors are specified by -fx-border-color. There is a -fx-border-radius property, which I think is the one you are looking for.

There is no :before pseudoclass.

So you can try something like this (which is not tested; provide a complete example in your question if you want tested code in the answers):

.tab {
    -fx-border-color: white, red ;
    -fx-border-width: 1 0 0 0, 0 0 0 1 ;
    -fx-border-radius: 5 0 0 0 ;
}

Refer to the JavaFX CSS reference guide for an actual list of defined properties.

It's also worth noting that in the default styles, borders are almost never used directly. The preferred way of creating a border effect in modena is to use "nested backgrounds". Using this approach your CSS might look like:

.tab {
    -fx-background-color: white, red, -fx-body-color ;
    -fx-background-insets: 0, 1 0 0 0, 1 0 0 1 ;
    -fx-background-radius: 10 0 0 0 ;
}

For more complex shapes (other than just rectangles with rounded corners), you could also use the -fx-shape property, using SVG syntax to define the shape of the tab.

It's useful to look at the source code for the default stylesheet to see how this all works. You probably want to change the styles for .tab:selected to make selection play nicely with your styles.

CodePudding user response：

I decided to do it a lazy way, set the image in the background in the format I wanted and left the background transparent.

.tab {
-fx-background-image: url("../icons/pane.png");
-fx-background-size: stretch;
-fx-background-color: transparent;
-fx-padding: 0px 20px 0px 20px;

Tab