Simple folded corners

dabblet.css

/**
 * Simple folded corners
 */

div {
	background: yellowgreen; /* fallback */
	background: linear-gradient(45deg, rgba(0,0,0,.4) 50%, transparent 0) 100% 0 / 25px 25px no-repeat,
	            linear-gradient(-135deg, transparent 18px, yellowgreen 0) 0 / auto; /* ceil(25/sqrt(2)) = 18 */
	            
	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"}