Skip to content

Instantly share code, notes, and snippets.

@salbito
Forked from chriscoyier/dabblet.css
Created November 26, 2012 03:05
Show Gist options
  • Save salbito/4146410 to your computer and use it in GitHub Desktop.
Save salbito/4146410 to your computer and use it in GitHub Desktop.
Triangle with Shadow
/*
Triangle with Shadow
*/
.triangle-with-shadow {
width: 50px;
height: 200px;
position: relative;
overflow: hidden;
box-shadow: 0 16px 10px -17px rgba(0,0,0,0.5);
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
transform: rotate(45eg);
top: 75px;
left: 25px;
box-shadow: -1px -1px 10px -2px rgba(0,0,0,0.5);
}
.triangle-with-shadow:hover, .triangle-with-shadow:hover:after {
box-shadow: none;
}
<div class="triangle-with-shadow"></div>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment