Last active
October 9, 2015 09:58
-
-
Save airen/925b4fba6a4bdcfd6a62 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="box"> | |
| <span class="caret-top"></span> | |
| </div> | |
| <div class="box"> | |
| <span class="caret-right"></span> | |
| </div> | |
| <div class="box"> | |
| <span class="caret-bottom"></span> | |
| </div> | |
| <div class="box"> | |
| <span class="caret-left"></span> | |
| </div> | |
| <div class="box box2"> | |
| <span class="caret-top"></span> | |
| </div> | |
| <div class="box box2"> | |
| <span class="caret-right"></span> | |
| </div> | |
| <div class="box box2"> | |
| <span class="caret-bottom"></span> | |
| </div> | |
| <div class="box box2"> | |
| <span class="caret-left"></span> | |
| </div> | |
| <div class="tip"> | |
| <span class="caret-top"></span> | |
| </div> | |
| <div class="tip"> | |
| <span class="caret-right"></span> | |
| </div> | |
| <div class="tip"> | |
| <span class="caret-bottom"></span> | |
| </div> | |
| <div class="tip"> | |
| <span class="caret-left"></span> | |
| </div> | |
| <div class="tip tip2"> | |
| <span class="caret-top"></span> | |
| </div> | |
| <div class="tip tip2"> | |
| <span class="caret-right"></span> | |
| </div> | |
| <div class="tip tip2"> | |
| <span class="caret-bottom"></span> | |
| </div> | |
| <div class="tip tip2"> | |
| <span class="caret-left"></span> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.4.12) | |
| // Compass (v1.0.3) | |
| // ---- | |
| @mixin caret($position,$caret-width,$border-width,$direction,$border-color,$background-color){ | |
| position: $position; | |
| &:before, | |
| &:after { | |
| content:""; | |
| position: absolute; | |
| } | |
| @if $direction == bottom { | |
| &:before { | |
| top:0; | |
| left: 0; | |
| border-top: $caret-width solid $border-color; | |
| border-left: $caret-width solid transparent; | |
| border-right: $caret-width solid transparent; | |
| } | |
| &:after { | |
| left: $border-width; | |
| top: 0; | |
| border-top: ($caret-width - $border-width) solid $background-color; | |
| border-left: ($caret-width - $border-width) solid transparent; | |
| border-right: ($caret-width - $border-width) solid transparent; | |
| } | |
| } @else if $direction == top { | |
| &:before { | |
| top:0; | |
| left: 0; | |
| border-bottom: $caret-width solid $border-color; | |
| border-left: $caret-width solid transparent; | |
| border-right: $caret-width solid transparent; | |
| } | |
| &:after { | |
| left: $border-width; | |
| top: $border-width; | |
| border-bottom: ($caret-width - $border-width) solid $background-color; | |
| border-left: ($caret-width - $border-width) solid transparent; | |
| border-right: ($caret-width - $border-width) solid transparent; | |
| } | |
| } @else if $direction == left { | |
| &:before { | |
| top:0; | |
| left: 0; | |
| border-right: $caret-width solid $border-color; | |
| border-top: $caret-width solid transparent; | |
| border-bottom: $caret-width solid transparent; | |
| } | |
| &:after { | |
| left: $border-width; | |
| top: $border-width; | |
| border-right: ($caret-width - $border-width) solid $background-color; | |
| border-top: ($caret-width - $border-width) solid transparent; | |
| border-bottom: ($caret-width - $border-width) solid transparent; | |
| } | |
| } @else if $direction == right { | |
| &:before { | |
| top:0; | |
| left: 0; | |
| border-left: $caret-width solid $border-color; | |
| border-top: $caret-width solid transparent; | |
| border-bottom: $caret-width solid transparent; | |
| } | |
| &:after { | |
| left: 0; | |
| top: $border-width; | |
| border-left: ($caret-width - $border-width) solid $background-color; | |
| border-top: ($caret-width - $border-width) solid transparent; | |
| border-bottom: ($caret-width - $border-width) solid transparent; | |
| } | |
| } | |
| } | |
| .box { | |
| width: 100px; | |
| height: 100px; | |
| margin: 20px; | |
| border: 1px solid orange; | |
| display: inline-block; | |
| background: orange; | |
| position: relative; | |
| vertical-align: middle; | |
| &.box2 { | |
| background-color: transparent; | |
| border: 1px solid orange; | |
| } | |
| .caret-top { | |
| bottom: 9px; | |
| left: 20px; | |
| @include caret(absolute,10px,1px,top,orange,#fff); | |
| } | |
| .caret-right { | |
| left: -1px; | |
| top: 20px; | |
| @include caret(absolute,10px,1px,right,orange,#fff); | |
| } | |
| .caret-bottom { | |
| top: -1px; | |
| left: 20px; | |
| @include caret(absolute,10px,1px,bottom,orange,#fff); | |
| } | |
| .caret-left { | |
| right: 9px; | |
| top: 20px; | |
| @include caret(absolute,10px,1px,left,orange,#fff); | |
| } | |
| } | |
| .tip{ | |
| width: 150px; | |
| height: 50px; | |
| background: #000; | |
| border-radius:3px; | |
| position: relative; | |
| display: inline-block; | |
| vertical-align: middle; | |
| margin: 20px; | |
| .caret-top{ | |
| top: -10px; | |
| left: 10px; | |
| @include caret(absolute,10px,1px,top,#000,#000); | |
| } | |
| .caret-right{ | |
| top: 10px; | |
| right: 0px; | |
| @include caret(absolute,10px,1px,right,#000,#000); | |
| } | |
| .caret-bottom{ | |
| bottom: 0px; | |
| left: 10px; | |
| @include caret(absolute,10px,1px,bottom,#000,#000); | |
| } | |
| .caret-left{ | |
| left: -10px; | |
| top: 10px; | |
| @include caret(absolute,10px,1px,left,#000,#000); | |
| } | |
| } | |
| .tip2 { | |
| background-color: transparent; | |
| border: 1px solid #000; | |
| .caret-top { | |
| @include caret(absolute,10px,1px,top,#000,#fff); | |
| } | |
| .caret-right { | |
| @include caret(absolute,10px,1px,right,#000,#fff); | |
| } | |
| .caret-bottom { | |
| @include caret(absolute,10px,1px,bottom,#000,#fff); | |
| } | |
| .caret-left { | |
| @include caret(absolute,10px,1px,left,#000,#fff); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .box { | |
| width: 100px; | |
| height: 100px; | |
| margin: 20px; | |
| border: 1px solid orange; | |
| display: inline-block; | |
| background: orange; | |
| position: relative; | |
| vertical-align: middle; | |
| } | |
| .box.box2 { | |
| background-color: transparent; | |
| border: 1px solid orange; | |
| } | |
| .box .caret-top { | |
| bottom: 9px; | |
| left: 20px; | |
| position: absolute; | |
| } | |
| .box .caret-top:before, .box .caret-top:after { | |
| content: ""; | |
| position: absolute; | |
| } | |
| .box .caret-top:before { | |
| top: 0; | |
| left: 0; | |
| border-bottom: 10px solid orange; | |
| border-left: 10px solid transparent; | |
| border-right: 10px solid transparent; | |
| } | |
| .box .caret-top:after { | |
| left: 1px; | |
| top: 1px; | |
| border-bottom: 9px solid #fff; | |
| border-left: 9px solid transparent; | |
| border-right: 9px solid transparent; | |
| } | |
| .box .caret-right { | |
| left: -1px; | |
| top: 20px; | |
| position: absolute; | |
| } | |
| .box .caret-right:before, .box .caret-right:after { | |
| content: ""; | |
| position: absolute; | |
| } | |
| .box .caret-right:before { | |
| top: 0; | |
| left: 0; | |
| border-left: 10px solid orange; | |
| border-top: 10px solid transparent; | |
| border-bottom: 10px solid transparent; | |
| } | |
| .box .caret-right:after { | |
| left: 0; | |
| top: 1px; | |
| border-left: 9px solid #fff; | |
| border-top: 9px solid transparent; | |
| border-bottom: 9px solid transparent; | |
| } | |
| .box .caret-bottom { | |
| top: -1px; | |
| left: 20px; | |
| position: absolute; | |
| } | |
| .box .caret-bottom:before, .box .caret-bottom:after { | |
| content: ""; | |
| position: absolute; | |
| } | |
| .box .caret-bottom:before { | |
| top: 0; | |
| left: 0; | |
| border-top: 10px solid orange; | |
| border-left: 10px solid transparent; | |
| border-right: 10px solid transparent; | |
| } | |
| .box .caret-bottom:after { | |
| left: 1px; | |
| top: 0; | |
| border-top: 9px solid #fff; | |
| border-left: 9px solid transparent; | |
| border-right: 9px solid transparent; | |
| } | |
| .box .caret-left { | |
| right: 9px; | |
| top: 20px; | |
| position: absolute; | |
| } | |
| .box .caret-left:before, .box .caret-left:after { | |
| content: ""; | |
| position: absolute; | |
| } | |
| .box .caret-left:before { | |
| top: 0; | |
| left: 0; | |
| border-right: 10px solid orange; | |
| border-top: 10px solid transparent; | |
| border-bottom: 10px solid transparent; | |
| } | |
| .box .caret-left:after { | |
| left: 1px; | |
| top: 1px; | |
| border-right: 9px solid #fff; | |
| border-top: 9px solid transparent; | |
| border-bottom: 9px solid transparent; | |
| } | |
| .tip { | |
| width: 150px; | |
| height: 50px; | |
| background: #000; | |
| border-radius: 3px; | |
| position: relative; | |
| display: inline-block; | |
| vertical-align: middle; | |
| margin: 20px; | |
| } | |
| .tip .caret-top { | |
| top: -10px; | |
| left: 10px; | |
| position: absolute; | |
| } | |
| .tip .caret-top:before, .tip .caret-top:after { | |
| content: ""; | |
| position: absolute; | |
| } | |
| .tip .caret-top:before { | |
| top: 0; | |
| left: 0; | |
| border-bottom: 10px solid #000; | |
| border-left: 10px solid transparent; | |
| border-right: 10px solid transparent; | |
| } | |
| .tip .caret-top:after { | |
| left: 1px; | |
| top: 1px; | |
| border-bottom: 9px solid #000; | |
| border-left: 9px solid transparent; | |
| border-right: 9px solid transparent; | |
| } | |
| .tip .caret-right { | |
| top: 10px; | |
| right: 0px; | |
| position: absolute; | |
| } | |
| .tip .caret-right:before, .tip .caret-right:after { | |
| content: ""; | |
| position: absolute; | |
| } | |
| .tip .caret-right:before { | |
| top: 0; | |
| left: 0; | |
| border-left: 10px solid #000; | |
| border-top: 10px solid transparent; | |
| border-bottom: 10px solid transparent; | |
| } | |
| .tip .caret-right:after { | |
| left: 0; | |
| top: 1px; | |
| border-left: 9px solid #000; | |
| border-top: 9px solid transparent; | |
| border-bottom: 9px solid transparent; | |
| } | |
| .tip .caret-bottom { | |
| bottom: 0px; | |
| left: 10px; | |
| position: absolute; | |
| } | |
| .tip .caret-bottom:before, .tip .caret-bottom:after { | |
| content: ""; | |
| position: absolute; | |
| } | |
| .tip .caret-bottom:before { | |
| top: 0; | |
| left: 0; | |
| border-top: 10px solid #000; | |
| border-left: 10px solid transparent; | |
| border-right: 10px solid transparent; | |
| } | |
| .tip .caret-bottom:after { | |
| left: 1px; | |
| top: 0; | |
| border-top: 9px solid #000; | |
| border-left: 9px solid transparent; | |
| border-right: 9px solid transparent; | |
| } | |
| .tip .caret-left { | |
| left: -10px; | |
| top: 10px; | |
| position: absolute; | |
| } | |
| .tip .caret-left:before, .tip .caret-left:after { | |
| content: ""; | |
| position: absolute; | |
| } | |
| .tip .caret-left:before { | |
| top: 0; | |
| left: 0; | |
| border-right: 10px solid #000; | |
| border-top: 10px solid transparent; | |
| border-bottom: 10px solid transparent; | |
| } | |
| .tip .caret-left:after { | |
| left: 1px; | |
| top: 1px; | |
| border-right: 9px solid #000; | |
| border-top: 9px solid transparent; | |
| border-bottom: 9px solid transparent; | |
| } | |
| .tip2 { | |
| background-color: transparent; | |
| border: 1px solid #000; | |
| } | |
| .tip2 .caret-top { | |
| position: absolute; | |
| } | |
| .tip2 .caret-top:before, .tip2 .caret-top:after { | |
| content: ""; | |
| position: absolute; | |
| } | |
| .tip2 .caret-top:before { | |
| top: 0; | |
| left: 0; | |
| border-bottom: 10px solid #000; | |
| border-left: 10px solid transparent; | |
| border-right: 10px solid transparent; | |
| } | |
| .tip2 .caret-top:after { | |
| left: 1px; | |
| top: 1px; | |
| border-bottom: 9px solid #fff; | |
| border-left: 9px solid transparent; | |
| border-right: 9px solid transparent; | |
| } | |
| .tip2 .caret-right { | |
| position: absolute; | |
| } | |
| .tip2 .caret-right:before, .tip2 .caret-right:after { | |
| content: ""; | |
| position: absolute; | |
| } | |
| .tip2 .caret-right:before { | |
| top: 0; | |
| left: 0; | |
| border-left: 10px solid #000; | |
| border-top: 10px solid transparent; | |
| border-bottom: 10px solid transparent; | |
| } | |
| .tip2 .caret-right:after { | |
| left: 0; | |
| top: 1px; | |
| border-left: 9px solid #fff; | |
| border-top: 9px solid transparent; | |
| border-bottom: 9px solid transparent; | |
| } | |
| .tip2 .caret-bottom { | |
| position: absolute; | |
| } | |
| .tip2 .caret-bottom:before, .tip2 .caret-bottom:after { | |
| content: ""; | |
| position: absolute; | |
| } | |
| .tip2 .caret-bottom:before { | |
| top: 0; | |
| left: 0; | |
| border-top: 10px solid #000; | |
| border-left: 10px solid transparent; | |
| border-right: 10px solid transparent; | |
| } | |
| .tip2 .caret-bottom:after { | |
| left: 1px; | |
| top: 0; | |
| border-top: 9px solid #fff; | |
| border-left: 9px solid transparent; | |
| border-right: 9px solid transparent; | |
| } | |
| .tip2 .caret-left { | |
| position: absolute; | |
| } | |
| .tip2 .caret-left:before, .tip2 .caret-left:after { | |
| content: ""; | |
| position: absolute; | |
| } | |
| .tip2 .caret-left:before { | |
| top: 0; | |
| left: 0; | |
| border-right: 10px solid #000; | |
| border-top: 10px solid transparent; | |
| border-bottom: 10px solid transparent; | |
| } | |
| .tip2 .caret-left:after { | |
| left: 1px; | |
| top: 1px; | |
| border-right: 9px solid #fff; | |
| border-top: 9px solid transparent; | |
| border-bottom: 9px solid transparent; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="box"> | |
| <span class="caret-top"></span> | |
| </div> | |
| <div class="box"> | |
| <span class="caret-right"></span> | |
| </div> | |
| <div class="box"> | |
| <span class="caret-bottom"></span> | |
| </div> | |
| <div class="box"> | |
| <span class="caret-left"></span> | |
| </div> | |
| <div class="box box2"> | |
| <span class="caret-top"></span> | |
| </div> | |
| <div class="box box2"> | |
| <span class="caret-right"></span> | |
| </div> | |
| <div class="box box2"> | |
| <span class="caret-bottom"></span> | |
| </div> | |
| <div class="box box2"> | |
| <span class="caret-left"></span> | |
| </div> | |
| <div class="tip"> | |
| <span class="caret-top"></span> | |
| </div> | |
| <div class="tip"> | |
| <span class="caret-right"></span> | |
| </div> | |
| <div class="tip"> | |
| <span class="caret-bottom"></span> | |
| </div> | |
| <div class="tip"> | |
| <span class="caret-left"></span> | |
| </div> | |
| <div class="tip tip2"> | |
| <span class="caret-top"></span> | |
| </div> | |
| <div class="tip tip2"> | |
| <span class="caret-right"></span> | |
| </div> | |
| <div class="tip tip2"> | |
| <span class="caret-bottom"></span> | |
| </div> | |
| <div class="tip tip2"> | |
| <span class="caret-left"></span> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment