Skip to content

Instantly share code, notes, and snippets.

@markjohnson4

markjohnson4/css-triangle.scss

Forked from patocallaghan/css-triangle.scss
Last active December 29, 2015 03:39
Download ZIP

Revisions

  1. markjohnson4 revised this gist Nov 23, 2013. 1 changed file with 31 additions and 7 deletions.
    38 changes: 31 additions & 7 deletions css-triangle.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,12 @@
    //==== 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", $size: 20px, $color: #000) {
    width: 0;
    height: 0;
    border-left: $size solid #{setTriangleColor($direction, "left", $color)};
    border-right: $size solid #{setTriangleColor($direction, "right", $color)};
    border-bottom: $size solid #{setTriangleColor($direction, "bottom", $color)};
    border-top: $size solid #{setTriangleColor($direction, "top", $color)};
    @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)};
    }

    //Utility function to return the relevant colour depending on what type of arrow it is
    @@ -21,4 +21,28 @@
    @return "transparent";
    }

    }
    @function setTriangleSize($direction, $side, $width, $height) {

    @if $direction == "up" and $side == "left"
    or $direction == "up" and $side == "right"
    or $direction == "down" and $side == "left"
    or $direction == "down" and $side == "right" {
    @return $width/2
    }
    @else if $direction == "up" and $side == "top"
    or $direction == "up" and $side == "bottom"
    or $direction == "down" and $side == "top"
    or $direction == "down" and $side == "bottom" {
    @return $height
    }
    @else if $direction == "left" and $side == "top"
    or $direction == "left" and $side == "bottom"
    or $direction == "right" and $side == "top"
    or $direction == "right" and $side == "bottom" {
    @return $height/2
    }
    @else {
    @return $width;
    }
    }
  2. markjohnson4 revised this gist Nov 23, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion css-triangle.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    //==== Simple SCSS mixin to create CSS triangles
    //==== Example: @include css-triangle ("up", 10px, #fff);
    //==== Example: @include css-triangle ("up", 30px, 10px, #fff); This would make a wide/short triangle
    @mixin css-triangle ($direction: "down", $size: 20px, $color: #000) {
    width: 0;
    height: 0;
  3. @patocallaghan patocallaghan revised this gist Jun 21, 2012. 1 changed file with 4 additions and 12 deletions.
    16 changes: 4 additions & 12 deletions css-triangle.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,20 +1,12 @@
    //==== Simple SCSS mixin to create CSS triangles
    //==== Example: @include css-triangle ("up", 10px, #fff);
    @mixin css-triangle ($direction: "down", $size: 20px, $color: #000) {

    width: 0;
    height: 0;

    $color-left: #{setTriangleColor($direction, "left", $color)};
    $color-right: #{setTriangleColor($direction, "right", $color)};
    $color-bottom: #{setTriangleColor($direction, "bottom", $color)};
    $color-top: #{setTriangleColor($direction, "top", $color)};

    border-left: $size solid $color-left;
    border-right: $size solid $color-right;
    border-bottom: $size solid $color-bottom;
    border-top: $size solid $color-top;

    border-left: $size solid #{setTriangleColor($direction, "left", $color)};
    border-right: $size solid #{setTriangleColor($direction, "right", $color)};
    border-bottom: $size solid #{setTriangleColor($direction, "bottom", $color)};
    border-top: $size solid #{setTriangleColor($direction, "top", $color)};
    }

    //Utility function to return the relevant colour depending on what type of arrow it is
  4. @patocallaghan patocallaghan created this gist Jun 21, 2012.
    32 changes: 32 additions & 0 deletions css-triangle.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    //==== Simple SCSS mixin to create CSS triangles
    //==== Example: @include css-triangle ("up", 10px, #fff);
    @mixin css-triangle ($direction: "down", $size: 20px, $color: #000) {

    width: 0;
    height: 0;

    $color-left: #{setTriangleColor($direction, "left", $color)};
    $color-right: #{setTriangleColor($direction, "right", $color)};
    $color-bottom: #{setTriangleColor($direction, "bottom", $color)};
    $color-top: #{setTriangleColor($direction, "top", $color)};

    border-left: $size solid $color-left;
    border-right: $size solid $color-right;
    border-bottom: $size solid $color-bottom;
    border-top: $size solid $color-top;

    }

    //Utility function to return the relevant colour depending on what type of arrow it is
    @function setTriangleColor($direction, $side, $color) {

    @if $direction == "left" and $side == "right"
    or $direction == "right" and $side == "left"
    or $direction == "down" and $side == "top"
    or $direction == "up" and $side == "bottom" {
    @return $color
    } @else {
    @return "transparent";
    }

    }