Skip to content

Instantly share code, notes, and snippets.

@jrob00
Forked from chriscoyier/dabblet.css
Created May 11, 2012 16:23
Show Gist options
  • Save jrob00/2660751 to your computer and use it in GitHub Desktop.
Save jrob00/2660751 to your computer and use it in GitHub Desktop.
Triangle with Shadow
/*
Triangle with Shadow
*/
.triangle-with-shadow {
width: 100px;
height: 100px;
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(45deg);
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":"80","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment