public
Last active

SASS: Bordered Box Arrow

  • Download Gist
*.scss
Sass
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
@import "compass/css3";
 
// Add outward pointing arrows (triangles) to the sides of a box that has borders. (CSS triangles obviously
// based on Chris Coyier's CSS triangle. http://css-tricks.com/snippets/css/css-triangle.)
//
// Parameters:
//
// * `direction` -- What side of the box and direction of the arrow
// * `flatten` -- An *even numbered* factor of flattening the triangle (MUST be a even number)
// * `arrowBaseLength` -- Width or height of the arrow's base
// * `borderWidth` -- Width of the arrow's border
// * `backgroundColor` -- Color of the arrow's background
// * `borderColor` -- Color of the arrow's border
@mixin bordered-box-arrow($direction:left, $flatten:2, $arrowBaseLength:16px, $borderWidth:1px, $backgroundColor:red, $borderColor:white) {
 
// Directional constants
$directionOpposite: opposite-position($direction);
$directionPerpendicular: null;
@if $direction == top or $direction == bottom { $directionPerpendicular: left; }
@if $direction == left or $direction == right { $directionPerpendicular: top; }
$directionPerpendicularOpposite: opposite-position($directionPerpendicular);
 
// Le math
$baseBorder: $arrowBaseLength * (1 / $flatten);
$drop: $baseBorder * -1;
$adjust: ($arrowBaseLength + $borderWidth * 2) * -1;
 
// Force relatively positioned container
position: relative !important;
 
&:before, &:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
#{$directionPerpendicular}: 50%;
margin-#{$directionPerpendicular}: $adjust;
border: {
#{$directionPerpendicular}: $arrowBaseLength solid transparent;
#{$directionPerpendicularOpposite}: $arrowBaseLength solid transparent;
}
border-#{$directionOpposite}: {
width: $baseBorder;
style: solid;
}
}
 
&:before {
#{$direction}: $drop;
border-#{$directionOpposite}-color: $borderColor;
}
 
&:after {
#{$direction}: $drop + $borderWidth;
border-#{$directionOpposite}-color: $backgroundColor;
}
}
 
//Example
.mybox {
width: 200px;
height: 100px;
background: #f4f4f4;
border: 1px solid #cccccc;
 
@include bordered-box-arrow(bottom, 2, 16px, 1px, #f4f4f4, #cccccc);
}
.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
@import "compass/css3";
 
// Add outward pointing arrows (triangles) to the sides of a box that has borders. (CSS triangles obviously
// based on Chris Coyier's CSS triangle. http://css-tricks.com/snippets/css/css-triangle.)
//
// Parameters:
//
// * `direction` -- What side of the box and direction of the arrow
// * `flatten` -- An *even numbered* factor of flattening the triangle (MUST be a even number)
// * `arrowBaseLength` -- Width or height of the arrow's base
// * `borderWidth` -- Width of the arrow's border
// * `backgroundColor` -- Color of the arrow's background
// * `borderColor` -- Color of the arrow's border
@mixin bordered-box-arrow($direction:left, $flatten:2, $arrowBaseLength:16px, $borderWidth:1px, $backgroundColor:red, $borderColor:white) {
 
// Directional constants
$directionOpposite: opposite-position($direction);
$directionPerpendicular: null;
@if $direction == top or $direction == bottom { $directionPerpendicular: left; }
@if $direction == left or $direction == right { $directionPerpendicular: top; }
$directionPerpendicularOpposite: opposite-position($directionPerpendicular);
 
// Le math
$baseBorder: $arrowBaseLength * (1 / $flatten);
$drop: $baseBorder * -1;
$adjust: ($arrowBaseLength + $borderWidth * 2) * -1;
 
// Force relatively positioned container
position: relative !important;
 
&:before, &:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
#{$directionPerpendicular}: 50%;
margin-#{$directionPerpendicular}: $adjust;
border: {
#{$directionPerpendicular}: $arrowBaseLength solid transparent;
#{$directionPerpendicularOpposite}: $arrowBaseLength solid transparent;
}
border-#{$directionOpposite}: {
width: $baseBorder;
style: solid;
}
}
 
&:before {
#{$direction}: $drop;
border-#{$directionOpposite}-color: $borderColor;
}
 
&:after {
#{$direction}: $drop + $borderWidth;
border-#{$directionOpposite}-color: $backgroundColor;
}
}
 
//Example
.mybox {
width: 200px;
height: 100px;
background: #f4f4f4;
border: 1px solid #cccccc;
 
@include bordered-box-arrow(bottom, 2, 16px, 1px, #f4f4f4, #cccccc);
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.