markjohnson4

5 followers · 3 following

View GitHub Profile

Recently created

Least recently created

Recently updated

Least recently updated

markjohnson4 / css-triangle.scss

Last active December 29, 2015 03:39 — forked from patocallaghan/css-triangle.scss

	//==== Simple SCSS mixin to create CSS triangles
	//==== Example: @include css-triangle ("up", 30px, 10px, #fff); This would make a wide/short triangle
	@mixin css-triangle ($direction: "down", $width: 20px, $height: 20px, $color: #000) {
	width: 0;
	height: 0;
	border-left: #{setTriangleSize($direction, "left", $width, $height)} solid #{setTriangleColor($direction, "left", $color)};
	border-right: #{setTriangleSize($direction, "right", $width, $height)} solid #{setTriangleColor($direction, "right", $color)};
	border-bottom: #{setTriangleSize($direction, "bottom", $width, $height)} solid #{setTriangleColor($direction, "bottom", $color)};
	border-top: #{setTriangleSize($direction, "top", $width, $height)} solid #{setTriangleColor($direction, "top", $color)};
	}

markjohnson4 / css-triangle.scss

Last active December 29, 2015 03:39 — forked from patocallaghan/css-triangle.scss

	//==== Simple SCSS mixin to create CSS triangles
	//==== Example: @include css-triangle ("up", 10px, #fff);
	@mixin css-triangle ($direction: "down", $width: 20px, $height: 20px, $color: #000) {
	width: 0;
	height: 0;
	border-left: #{setTriangleSize($direction, "left", $width, $height)} solid #{setTriangleColor($direction, "left", $color)};
	border-right: #{setTriangleSize($direction, "right", $width, $height)} solid #{setTriangleColor($direction, "right", $color)};
	border-bottom: #{setTriangleSize($direction, "bottom", $width, $height)} solid #{setTriangleColor($direction, "bottom", $color)};
	border-top: #{setTriangleSize($direction, "top", $width, $height)} solid #{setTriangleColor($direction, "top", $color)};
	}