Sloped Edge - Sass mixin
With this powerful Sass mixin (uses scss syntax), you'll be able to build sloped section edges with a consistent angle.
It uses most basic css properties, mainly just a border... No transforms or clip-path properties, no svg images.
Installation (pick one)
- Download latest release
git clone https://github.com/dvlden/sloped-edge.gityarn add sloped-edgenpm i sloped-edge
Usage
// import mixin
@use './node_modules/sloped-edge/src/index' as sloped;
// set variable for a color
$dark-grey: #292929;
// give it a class with any name you prefer
.section {
// apply some base styling to the section
background-color: $dark-grey;
min-height: 50vh;
// let the mixin do the magic
@include sloped.edge-root;
@include sloped.edge($dark-grey, 'right');
}HINT: For "real-world" use case and more advanced example, check "examples" live or locally.
Arguments
| Argument | Default Value | Possible Value |
|---|---|---|
$color |
- | any color (e.g. #292929) |
$position |
- | in, out, right, left |
$height |
5rem |
any number with a unit that is supported within border-width property |
HINT: For the
$coloryou don't necesserily have to useHEXvalue.
Variables
| Variable | Default Value | Possible Value |
|---|---|---|
$height |
5rem |
- |
$layout |
'y' |
x, y |
Examples
You'll find two examples that include all possible variations. The only difference between these examples is a layout... You can download this whole project and open examples locally or you may check live examples (hosted on GitHub Pages):
Browser Support
Basically, just the support of Viewport units (vw | vh). Check the browser coverage on the link below...