Skip to content

Instantly share code, notes, and snippets.

@airen

airen/SassMeister-input-HTML.html

Last active October 9, 2015 09:58
Show Gist options
  • Save airen/925b4fba6a4bdcfd6a62 to your computer and use it in GitHub Desktop.
Save airen/925b4fba6a4bdcfd6a62 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<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>
Raw
SassMeister-input.scss
// ----
// 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);
}
}
Raw
SassMeister-output.css
.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;
}
Raw
SassMeister-rendered.html
<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