This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

sloped-edge

3.0.1 • Public • Published

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)

  1. Download latest release
  2. git clone https://github.com/dvlden/sloped-edge.git
  3. yarn add sloped-edge
  4. npm 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 $color you don't necesserily have to use HEX value.

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...

Can I Use - Viewport units?

Package Sidebar

Install

npm i sloped-edge

Weekly Downloads

3

Version

3.0.1

License

MIT

Unpacked Size

7.52 kB

Total Files

7

Last publish

Collaborators

  • dvlden