Slanted edges
Slanted edges for articles with a background color
Requirements
- NATURE theme version 2.6.0 or later
- V2 installation with CSS variables (not SCSS variables)
- Contao 5
- Bulma 1.x
This feature adds slanted edges to articles with background colors.
Slanted edges - CSS classes
Add the CSS classes for slanted edges in the article settings under the field CSS style selection. If you use a newer version of the theme demo, the classes can be selected there. Otherwise you can enter the classes directly in the CSS class field.
| Slanted edge | CSS class |
|---|---|
| Slope at top ↖ (rises to the left) | has-slope-top-left |
| Slope at top ↗ (rises to the right) | has-slope-top-right |
| Slope at bottom ↘ (falls to the right) | has-slope-bottom-right |
| Slope at bottom ↙ (falls to the left) | has-slope-bottom-left |
Background color classes
Slanted edges only work in combination with background colors. Assign one of the following classes to an article, for example:
| Class | Background color (example) |
|---|---|
has-background-white | hsl(0, 0%, 100%) |
has-background-black | hsl(0, 0%, 4%) |
has-background-light | hsl(0, 0%, 96%) |
has-background-dark | hsl(0, 0%, 21%) |
has-background-primary | hsl(171, 100%, 41%) |
has-background-link | hsl(217, 71%, 53%) |
has-background-info | hsl(204, 86%, 53%) |
has-background-success | hsl(141, 71%, 48%) |
has-background-warning | hsl(48, 100%, 67%) |
has-background-danger | hsl(348, 100%, 61%) |
More background shades
| Class | Background color (example) |
|---|---|
has-background-black-bis | hsl(0, 0%, 7%) |
has-background-black-ter | hsl(0, 0%, 14%) |
has-background-grey-darker | hsl(0, 0%, 21%) |
has-background-grey-dark | hsl(0, 0%, 29%) |
has-background-grey | hsl(0, 0%, 48%) |
has-background-grey-light | hsl(0, 0%, 71%) |
has-background-grey-lighter | hsl(0, 0%, 86%) |
has-background-white-ter | hsl(0, 0%, 96%) |
has-background-white-bis | hsl(0, 0%, 98%) |
Example
You find an example page with slanted edges in our theme demo:
https://nature.contao-themes.net/layouts/schraege-kanten.html
There, articles without a background color and slope classes are placed between colored articles to create the effect.