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.
Options| Parameter | Description | | ----------| ----------- | |
$location| Location of shape relative to parent element
$hypotenuse| Side of the right triangle that the hypotenuse is on
$fill| Fill color of triangle | |
$height| Optional - Height of triangle - Accepts a unitless integer that is equivalent to height in
$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.xVersion 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
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.
@include angled-edge('outside bottom', 'lower right', 150)
Browser SupportAnywhere 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