Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
SASS: Bordered Box Arrow
@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);
}
@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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.