Skip to content

Instantly share code, notes, and snippets.

@dbushell
Created July 12, 2012 17:04
Show Gist options
  • Save dbushell/3099339 to your computer and use it in GitHub Desktop.
Save dbushell/3099339 to your computer and use it in GitHub Desktop.
Diagonal Stripe Background with CSS and SVG
/**
* 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>');
*/
}
<div id="content">
Diagonal Stripe Background with CSS and SVG
</div>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment