Faux picture corner

dabblet.css

/**
 * Faux picture corner
 */
body{
	margin:50px 0;
}

.picture{
	position:relative;
	width:60%;
	max-width:500px;
	margin:auto;
}
	.picture-img{
		position:relative;
		z-index:0;
		width:100%;
		border-bottom-right-radius:20px 70px;
		box-shadow:
			0 2px 1px 0 rgba(1,1,1,.3),
			2px 0 1px 0 rgba(1,1,1,.5)
		;
	}
	.picture-caption{
		position:absolute;
		bottom:0;
		left:50%;
		z-index:1;
		width:60%;
		margin:0 0 1em -30%;
		padding:0.25em 0;
		background:rgba(255,255,255,.9);
		color:#333;
		border-radius:5px;
		box-shadow:0 1px 0 0 rgba(1,1,1,.3);
		text-align:center;
		font:italic normal 16px/1.5em georgia,serif;
	}
	[class^="picture-corner"]{
		position:absolute;
		z-index:1;
		display:block;
		overflow:hidden;
		width:50px;
		height:50px;
		box-shadow:
			inset -1px 0 0 0 rgba(1,1,1,.5),
			inset 0 1px 0 0 rgba(1,1,1,.5)

		;
	}
		[class^="picture-corner"]:before{
			content:" ";
			position:absolute;
			bottom:0;
			right:0;
			display:block;
			width:100px;
			height:100px;
			background:#fff;
			background:-webkit-linear-gradient(90deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.8) 20%);
			box-shadow:
				inset 0 -1px 0 0 rgba(1,1,1,.5),
				inset 0 -1px 0 1px rgba(255,255,255,.4),
				0 1px 6px 0 rgba(1,1,1,.5)
			;
			-webkit-transform:rotate(45deg);
			-webkit-transform-origin:100% 100%;
		}
		.picture-corner_top{
			top:-5px;
			right:-5px;
		}
		.picture-corner_btm{			
			bottom:-1px;
			left:-5px;
			-webkit-transform:rotate(180deg);
		}

dabblet.html

<figure class="picture">
	<span class="picture-corner_top"></span>
	<span class="picture-corner_btm"></span>
	<img class="picture-img" src="http://placekitten.com/500/500" alt="Kittens" />
	<figcaption class="picture-caption">Kitten</figcaption>
</figure>

dabblet.js

// alert('Hello world!');

settings.json

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