Skip to content

Instantly share code, notes, and snippets.

@wesley6j

wesley6j/flag.scss

Last active April 3, 2018 01:48
Show Gist options
  • Save wesley6j/0a1b8bda0c9eb4880c4d490365e46424 to your computer and use it in GitHub Desktop.
Save wesley6j/0a1b8bda0c9eb4880c4d490365e46424 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. wesley6j revised this gist Apr 3, 2018. No changes.
  2. wesley6j created this gist Apr 3, 2018.
    28 changes: 28 additions & 0 deletions flag.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    @mixin flag-variant($height, $bg) {
    display: block;
    background:$bg;
    position: relative;
    line-height: $height;
    font-size: $height*.5;

    &::before,
    &::after {
    content: "";
    position: absolute;
    left: 100%;
    width: 0;
    height: 0;
    border-style: solid;
    display: block;
    }
    &::before {
    top: 0;
    border-width: $height*.6 $height*.5 $height*.2 0;
    border-color: $bg transparent transparent transparent;
    }
    &::after {
    bottom: 0;
    border-width: $height*.2 $height*.5 $height*.6 0;
    border-color: transparent transparent $bg transparent;
    }
    }