Triangle with Shadow

dabblet.css

/*
	Triangle with Shadow
*/

.triangle-with-shadow {
   width: 50px;
   height: 100px;
   position: relative;
   overflow: hidden;
   box-shadow: none
}
.triangle-with-shadow:after {
   content: "";
   position: absolute;
   width: 150px;
   height: 50px;
   background: #999;
   transform: rotate(45deg);
   top: -20px;
   left: -110px;
   box-shadow: 1px 1px 10px 1px rgba(0,0,0,0.5);
}
.triangle-with-shadow:hover, .triangle-with-shadow:hover:after {
   box-shadow: none;
}

dabblet.html

<div class="triangle-with-shadow"></div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}