Three D Box

dabblet.css

/**
 * Three D Box
 */
.three-d-box {
	background-color: #186799;
	min-height: 100px;
	width: 20%;
	padding: 10px;
	-webkit-box-shadow: 20px -20px 0px #00446E;
        -moz-box-shadow: 20px -20px 0px 0px #00446E;
        box-shadow: 20px -20px 0px 0px #00446E; 
        filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=20, OffY=-20, Color='00446E', Positive='true');
}
.triangle {
	border-width: 20px;
	height: 0px;
	width: 0px;
	position: relative;
	z-index: -1;
}
.content::before {
	content: "";
	border-color: transparent #00446E transparent transparent;
	border-style: inset inset solid inset;
	top: -30px;
	left: -30px;
}
.t-bottom-right {
	border-color: transparent transparent transparent #00446E;
	border-style: inset inset inset solid;
	bottom: -10px;
	right: -10px;
	margin-left: 100%
}
body {
	padding: 100px;
	color: #F5F5F5;
	text-align: center;
}

dabblet.html

<div class="three-d-box">
	<div class="content">
	<div class="triangle t-top-left"></div>
	<h2>I am a special box!</h2>
	<div class="triangle t-bottom-right"></div>
	</div>
</div>

settings.json

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