Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save jmwhittaker/958675 to your computer and use it in GitHub Desktop.
Save jmwhittaker/958675 to your computer and use it in GitHub Desktop.

A pure CSS bendy shadow:

I suspect that some trig calculations could make this very general.

bendy_shadow

@mixin bendy-shadow($width, $angle: 5deg, $color: rgba(#333, 0.5)) {
position: relative;
z-index: 1;
@include box-shadow(0 10px 5px -5px $color);
&:before {
content: "";
position: absolute;
bottom: 2px;
left: 10px;
width: $width / 2;
height: 10px;
z-index: -1;
@include box-shadow(0 10px 10px 1px $color);
@include rotate(-$angle);
}
&:after {
content: "";
position: absolute;
bottom: 2px;
right: 10px;
width: $width / 2;
height: 10px;
z-index: -1;
@include box-shadow(0 10px 10px 1px $color);
@include rotate($angle);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment