πŸ“ Quickly create angled section edges using only Sass
CSS Ruby
Latest commit 70d52f9 Jan 5, 2017 @josephfusco committed on GitHub Update README.md

README.md

Angled Edges πŸ“ Build Status Bower version Donate

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

angled edge

Usage

Import partial:

@import "angled-edges";

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

@include angled-edge($location, $hypotenuse, $fill, $width: 2800, $height: 100);

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

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
$width Optional - Width of triangle (2800px default)
$height Optional - Height of triangle (100px default)

Demo

http://angled-edges.josephfus.co

Browser Support

Anywhere SVG is supported.

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

Project Ports