MadeMyDay/dabblet.css

## dabblet.css
/**
 * The first commented line is your dabblet’s title
 */
 *

 * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body{
background: green}
.paper {
width: 300px;
height: 400px;
background: #fff;
border-right: 50px solid #fff;
position: relative;
}
.paper:after{
content: "";
position: absolute;
height: 50px;
width: 250px;
bottom: -50px;
left: 0;
display: block;
background: #fff;
}

.paper:before{
  content: "";
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 0px;
  height: 0px;
  border-top: 50px solid #bbb;
  border-right: 50px solid transparent;
}


## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="paper">
</div>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* The first commented line is your dabblet’s title
	*/
	*

	* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

	body{
	background: green}
	.paper {
	width: 300px;
	height: 400px;
	background: #fff;
	border-right: 50px solid #fff;
	position: relative;
	}
	.paper:after{
	content: "";
	position: absolute;
	height: 50px;
	width: 250px;
	bottom: -50px;
	left: 0;
	display: block;
	background: #fff;
	}

	.paper:before{
	content: "";
	position: absolute;
	bottom: -50px;
	right: -50px;
	width: 0px;
	height: 0px;
	border-top: 50px solid #bbb;
	border-right: 50px solid transparent;
	}
	<!-- content to be placed inside <body>…</body> -->
	<div class="paper">
	</div>