Patterned borders

dabblet.css

/**
 * Patterned borders
 */

div {
	max-width: 20em;
	padding: 1em;
	border: 1em solid rgba(0,0,0,.1);
	background: repeating-linear-gradient(-45deg, blue 0, blue 1em, transparent 0, transparent 3em),
	            repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 3em) 2.2em 0;
	background-origin: border-box;
}

dabblet.html

<div>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </div>

dabblet.js

// alert('Hello world!');

settings.json

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