Simple folded corners

dabblet.css

/**
 * Simple folded corners
 */

div {
	background: yellowgreen; /* fallback */
	
	            
	padding: 1em;
	width: 12em;
	margin: 1em;
	font: 150%/1.6 Baskerville, Palatino, serif;
}

body {
	/* Showcase that the effect supports any backdrop */
	background: repeating-linear-gradient(-45deg, #ddd 0, #ddd 25%, white 0, white 50%) 0 / 6px 6px;
	box-sizing: border-box;
	padding: 1em;
	height: 100vh;
}

dabblet.html

<div>Look at my cool folded corner. 
It only took two lines of CSS, degrades gracefully and works everywhere!</div>

dabblet.js

// alert('Hello world!');

settings.json

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