JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Angled Edges

    :triangular_ruler: Quickly create angled section edges using only Sass
    Filed under  › 

    • 🔾39%Overall
    • 958
    • 13.4 days
    • 🕩58
    • 👥5

    Angled Edges :triangular_ruler: Build Status Bower version npm version

    A Sass mixin for creating angled edges on sections by dynamically encoding SVGs.

    Need angled edges in regular CSS? Check out the Angled Edges Generator.

    angled edge

    Usage

    Import partial:

    @import "angled-edges";
    

    This mixin has 3 required parameters: location, hypotenuse, fill

    @include angled-edge($location, $hypotenuse, $fill);
    

    The main mixin creates an svg right triangle that is encoded, set as a background image of a pseudo element, and absolutely positioned.

    Examples

    https://codepen.io/fusco/pen/mzymKm

    Options

    Parameter Description
    $location Location of shape relative to parent element
    • inside top
    • outside top
    • inside bottom
    • outside bottom
    $hypotenuse Side of the right triangle that the hypotenuse is on
    • upper left
    • upper right
    • lower left
    • lower right
    $fill Fill color of triangle
    $height Optional - Height of triangle - Accepts a unitless integer that is equivalent to height in px
    $width Optional - Width of triangle - Accepts a unitless integer that is equivalent to width in px (If nothing is passed triangle will span to a 100% fluid width)

    Upgrading from 1.x

    Version 2 now defaults with a fluid width of 100%. Since this is the preferred value, width and height parameters have switched order with height now being first. This allows for easier usage where

    @include angled-edge('outside bottom', 'lower right', 150);
    

    now means a 150px tall with at a default of 100% width. If a fluid width is not needed, you can still pass in a unitless width like in 1.x. If you previously were using background-size to manipulate the shape, you will need to remove this property as the mixin also uses this to assist with making the shape full-width.

    Demo

    https://angled-edges.josephfus.co

    Browser Support

    Anywhere SVG is supported.

    • [x] IE 9+
    • [x] Edge
    • [x] Firefox
    • [x] Chrome
    • [x] Safari
    • [x] Opera
    • [x] iOS Safari
    • [x] Opera Mini
    • [x] Android Browser
    • [x] Chrome for Android

    Project Ports

    Show All