Skip to content

Instantly share code, notes, and snippets.

@elijahmurray
Created March 25, 2014 23:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save elijahmurray/9773799 to your computer and use it in GitHub Desktop.
Save elijahmurray/9773799 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----
@mixin calc-width($percentage, $width) {
/* Firefox */
width: -moz-calc(#{$percentage} - #{$width});
/* WebKit */
width: -webkit-calc(#{$percentage} - #{$width});
/* Opera */
width: -o-calc(#{$percentage} - #{$width});
/* Standard */
width: calc(#{$percentage} - #{$width});
}
@mixin calc-height($element, $percentage, $pixels) {
/* Firefox */
$element: -moz-calc(#{$percentage} - #{$pixels});
/* WebKit */
$element: -webkit-calc(#{$percentage} - #{$pixels});
/* Opera */
$element: -o-calc(#{$percentage} - #{$pixels});
/* Standard */
$element: calc(#{$percentage} - #{$pixels});
}
.white-triangle {
width: 0; height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 20px solid white;
position: absolute;
@include calc-height("top", "50%", "15px");
@include calc-width("50%", "15px");
right: 0;
// top: 50%;
}
.white-triangle {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 20px solid white;
position: absolute;
/* Firefox */
/* WebKit */
/* Opera */
/* Standard */
/* Firefox */
width: -moz-calc(50% - 15px);
/* WebKit */
width: -webkit-calc(50% - 15px);
/* Opera */
width: -o-calc(50% - 15px);
/* Standard */
width: calc(50% - 15px);
right: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment