Skip to content

Instantly share code, notes, and snippets.

@alexgleason
Last active May 5, 2016 22:51
Show Gist options
  • Save alexgleason/959dc5ab13bc9108210e501b2fb55714 to your computer and use it in GitHub Desktop.
Save alexgleason/959dc5ab13bc9108210e501b2fb55714 to your computer and use it in GitHub Desktop.
Make elements pointy
$triangle-size: 60px !default;
@mixin triangle($hexstring, $side) {
position: relative;
&::after {
content: '';
background-repeat: no-repeat;
display: block;
position: absolute;
background-position: bottom;
@if $side == 'bottom' {
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%3E%3Cpath%20d%3D%22M%200%2C0%200%2C100%2050%2C100%200%2C0%20z%20m%2050%2C100%2050%2C0%200%2C-100%20-50%2C100%20z%22%20style%3D%22fill%3A%23#{$hexstring}%22%2F%3E%3C%2Fsvg%3E');
width: 100%;
height: $triangle-size;
background-size: 100% $triangle-size;
bottom: 0;
left: 0;
right: 0;
}
@else if $side == 'left' {
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%3E%3Cpath%20d%3D%22M%20100%2C0%200%2C0%200%2C50%20100%2C0%20z%20M%200%2C50%200%2C100%20100%2C100%200%2C50%20z%22%20style%3D%22fill%3A%23#{$hexstring}%22%2F%3E%3C%2Fsvg%3E');
width: $triangle-size;
height: 100%;
background-size: $triangle-size 100%;
left: 0;
top: 0;
bottom: 0;
}
@else if $side == 'right' {
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%3E%3Cpath%20d%3D%22m%200%2C100%20100%2C0%200%2C-50%20L%200%2C100%20z%20M%20100%2C50%20100%2C0%200%2C0%20100%2C50%20z%22%20style%3D%22fill%3A%23#{$hexstring}%22%2F%3E%3C%2Fsvg%3E');
width: $triangle-size;
height: 100%;
background-size: $triangle-size 100%;
right: 0;
top: 0;
bottom: 0;
}
@else if $side == 'top' {
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%3E%3Cpath%20d%3D%22M%20100%2C100%20100%2C0%2050%2C0%20100%2C100%20z%20M%2050%2C0%200%2C0%200%2C100%2050%2C0%20z%22%20style%3D%22fill%3A%23#{$hexstring}%22%2F%3E%3C%2Fsvg%3E');
width: 100%;
height: $triangle-size;
background-size: 100% $triangle-size;
top: 0;
left: 0;
right: 0;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment