Skip to content

Instantly share code, notes, and snippets.

@andrewrocco

andrewrocco/diagonal-lines.sass

Last active December 10, 2015 23:48
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save andrewrocco/4512071 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save andrewrocco/4512071 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. andrewrocco revised this gist Jan 11, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion diagonal-lines.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -15,9 +15,9 @@
    }
    &:before {
    border-left: 40px solid white;
    left: 1px;
    }
    &:after {
    border-left: 40px solid black;
    left: -1px;
    }
    }
  2. andrewrocco revised this gist Jan 11, 2013. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions diagonal-lines.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    // Diagonal Lines
    .some-element {
    background: black;
    position: relative;
    &:before,
    &:after {
  3. andrewrocco created this gist Jan 11, 2013.
    22 changes: 22 additions & 0 deletions diagonal-lines.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    // Diagonal Lines
    .some-element {
    position: relative;
    &:before,
    &:after {
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    top: -40px;
    width: 0;
    }
    &:before {
    border-left: 40px solid white;
    }
    &:after {
    border-left: 40px solid black;
    left: -1px;
    }
    }