Triangle with Shadow

dabblet.css

/*
	Triangle with Shadow
*/
.triangle
{
	white-space: nowrap;
	width: 520px;
	height: 320px;	
}

.triangle-body
{
	background: #999;
	width: 475px;
	height: 100%;
	display: inline-block;	
}

.triangle-icon {
  
   display: inline-block;
   width: 100%;
   height: 100%;
   position: relative;
   overflow: hidden;
   /*box-shadow: 0 16px 10px -17px rgba(0,0,0,0.5);*/
}

.triangle-icon::after {
   border-radius: 5px;
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   background: #999;
   transform: rotate(45deg);
   top: -23%;
   left: -75%;
   /*box-shadow: -1px -1px 10px -2px rgba(0,0,0,0.5);*/
}

dabblet.html

<div class="triangle">
	<div class="triangle-body"></div
	><div class="triangle-icon"></div>
</div>

settings.json

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