Skip to content

Instantly share code, notes, and snippets.

@TresSims
Created July 1, 2021 05:33
Show Gist options
  • Save TresSims/9a35852c600f20bbfe7bd911a20105d3 to your computer and use it in GitHub Desktop.
Save TresSims/9a35852c600f20bbfe7bd911a20105d3 to your computer and use it in GitHub Desktop.
Cut Corner Div Element for SCSS
.div{
@include corner-clip($tr-notch-size: 5px, $tl-notch-size: 5px, $bl-notch-size: 5px, $br-notch-size: 5px);
}
@mixin corner-clip($tl-notch-size: 0px, $tr-notch-size: 0px, $bl-notch-size: 0px, $br-notch-size: 0px) {
clip-path:
polygon(
0% $tl-notch-size, /* top left */
$tl-notch-size 0%,
calc(100% - #{$tr-notch-size}) 0%, /* top right */
100% $tr-notch-size,
100% calc(100% - #{$br-notch-size}), /* bottom right */
calc(100% - #{$br-notch-size}) 100%,
$bl-notch-size 100%, /* bottome left */
0 calc(100% - #{$bl-notch-size})
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment