Triangle with Shadow

dabblet.css

/*
	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;
}

dabblet.html

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

settings.json

{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}