https://github.com/josephfusco/angled-edges

:triangular_ruler: Quickly create angled section edges using only Sass
https://github.com/josephfusco/angled-edges

angled css edges fluid-width mixins sass svg

Last synced: 4 days ago
JSON representation

:triangular_ruler: Quickly create angled section edges using only Sass

• Host: GitHub
• URL: https://github.com/josephfusco/angled-edges
• Owner: josephfusco
• License: mit
• Created: 2016-06-13T15:05:45.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2019-01-04T12:59:49.000Z (almost 6 years ago)
• Last Synced: 2024-12-07T17:57:00.205Z (18 days ago)
• Topics: angled, css, edges, fluid-width, mixins, sass, svg
• Language: CSS
• Homepage: https://angled-edges.josephfus.co
• Size: 515 KB
• Stars: 962
• Watchers: 29
• Forks: 44
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Angled Edges :triangular_ruler: [![Build Status](https://travis-ci.org/josephfusco/angled-edges.svg?branch=master)](https://travis-ci.org/josephfusco/angled-edges) [![Bower version](https://badge.fury.io/bo/angled-edges.svg)](https://badge.fury.io/bo/angled-edges) [![npm version](https://badge.fury.io/js/angled-edges.svg)](https://badge.fury.io/js/angled-edges)

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](https://angled-edges-generator.josephfus.co).



## Usage

Import partial:

```scss

@import "angled-edges";

```

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

```scss

@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

```scss

@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](http://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

+ [Stylus Angled Edges](https://github.com/OlegWock/stylus-angled-edges)