Skip to content

Instantly share code, notes, and snippets.

@TangChr
Last active December 17, 2020 15:12
Show Gist options
  • Save TangChr/b58c77e0c9b687a8b625 to your computer and use it in GitHub Desktop.
Save TangChr/b58c77e0c9b687a8b625 to your computer and use it in GitHub Desktop.
Slated corners with SASS
@mixin slated-top-left($size, $foreground, $background) {
content: '';
position: absolute;
width: 0;
top: 0;
left: 0;
border-top: $size solid $background;
border-right: $size solid $foreground;
}
@mixin slated-top-right($size, $foreground, $background) {
content: '';
position: absolute;
width: 0;
top: 0;
right: 0;
border-top: $size solid $background;
border-left: $size solid $foreground;
}
@mixin slated-bottom-right($size, $foreground, $background) {
content: '';
position: absolute;
width: 0;
bottom: 0;
right: 0;
border-bottom: $size solid $background;
border-left: $size solid $foreground;
}
@mixin slated-bottom-left($size, $foreground, $background) {
content: '';
position: absolute;
width: 0;
bottom: 0;
left: 0;
border-bottom: $size solid $background;
border-right: $size solid $foreground;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment