Diagonal Stripe Background with CSS and SVG

dabblet.css

/**
 * Diagonal Stripe Background with CSS and SVG
 */

body {
	padding: 0;
	margin: 0;
}

#content {
	position: relative;
	width: 100%;
	margin: 2em 0;	
	padding: 0.5em 0.75em;
	box-sizing: border-box;
	color: #fff;
	font-size: 3em;
	line-height: 1.1em;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-weight: bold;
	letter-spacing: -0.0416em;
	background: #0099e6;
	background: linear-gradient(left, #0099e6, #0077b3);
}

#content:before,
#content:after {
    display: block;
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    width: 100%;
    height: 0.5em;
    background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAgMTAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwIDEwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCiAgICAgICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmdHcmFkaWVudCI+DQogICAgICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMDA5OWU2Ii8+DQogICAgICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDA3N2IzIi8+DQogICAgICAgICAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgICAgICAgICAgPHBvbHlnb24gZmlsbD0idXJsKCNiZ0dyYWRpZW50KSIgcG9pbnRzPSIwLDEwIDAsMCAxMCwwICIvPg0KICAgICAgICA8L3N2Zz4=');
    background-size: 100% 100%;
/*
 * UTF8 encoding works in Chrome:
 *
   background: url('data:image/svg+xml;charset=utf-8,\
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 10" preserveAspectRatio="none" enable-background="new 0 0 10 10" xml:space="preserve">\
            <linearGradient id="bgGradient">\
                <stop offset="0" stop-color="#0099e6"/>\
                <stop offset="1" stop-color="#0077b3"/>\
            </linearGradient>\
            <polygon fill="url(#bgGradient)" points="0,10 0,0 10,0 "/>\
        </svg>');
*/
}

#content:before {
	top: -0.5em;
	background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAgMTAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwIDEwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCiAgICAgICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmdHcmFkaWVudCI+DQogICAgICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMDA5OWU2Ii8+DQogICAgICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDA3N2IzIi8+DQogICAgICAgICAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgICAgICAgICAgPHBvbHlnb24gZmlsbD0idXJsKCNiZ0dyYWRpZW50KSIgcG9pbnRzPSIwLDEwIDEwLDEwIDEwLDAiLz4NCiAgICAgICAgPC9zdmc+');
	background-size: 100% 100%;

/*
   background: url('data:image/svg+xml;charset=utf-8,\
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 10" preserveAspectRatio="none" enable-background="new 0 0 10 10" xml:space="preserve">\
            <linearGradient id="bgGradient">\
                <stop offset="0" stop-color="#0099e6"/>\
                <stop offset="1" stop-color="#0077b3"/>\
            </linearGradient>\
            <polygon fill="url(#bgGradient)" points="0,10 10,10 10,0"/>\
        </svg>');
*/
}

dabblet.html

<div id="content">
	Diagonal Stripe Background with CSS and SVG
</div>

settings.json

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