zincplusplus

/**
 * hipster love
 */

background: 
radial-gradient(circle, #f30 0%, #f30 19%, #f30 33%, transparent 33%) 17em 8em,
radial-gradient(circle, #f30 0%, #f30 19%, #f30 33%, transparent 33%) 83em 8em,
radial-gradient(circle, #f30 10%, transparent 10%) 50em 40em,
linear-gradient(225deg, #f30 18%, transparent 18%) 150em 111em,
linear-gradient(315deg, #f30 18%, transparent 18%) 150em 111em;

zincplusplus

/**
* Ribbon
**/

.xribbon {
	font-family: Verdana, Arial, sans;
	position: relative;
	text-align: center;
}
.xribbon,

zincplusplus

/**
 * vintage green
 */


background: 	linear-gradient(27deg, transparent 48%, rgba(0,0,0,0.5) 48%, transparent 49%),
		linear-gradient(-27deg, transparent 48%, rgba(0,0,0,0.5) 48%, transparent 49%);
background-color: #00906f;
background-size: 20em 40em;
font-size: 1px;

zincplusplus

/**
 * paranoia
 */

background: 
radial-gradient(circle, rgba(255,255,255,.8) 4%, transparent 4%) 84em -13em,
radial-gradient(circle, black 8%, transparent 8%) 95em -2em,
radial-gradient(circle, rgba(255,255,255,.4) 16%, transparent 10%) 75em -22em,
radial-gradient(circle, #94caf0 16%, transparent 10%) 95em -2em,
radial-gradient(circle, white 24%, #dedede 31%, transparent 26%) 95em -2em,

zincplusplus

/**
 * arrogant
 */

background: 
    linear-gradient(126deg, #a5181f 2%, transparent 2%) -35em 21em,
    linear-gradient( 54deg, #a5181f 2%, transparent 2%) -36em 21em,
    linear-gradient( 18deg, #890f18 4%, transparent 4%) -36em 21em,
    linear-gradient(162deg, #890f18 4%, transparent 4%) -35em 21em,
    linear-gradient(234deg, #890f18 3%, transparent 3%) -35em 3em,

zincplusplus

/**
 * geek
 */

background: 
    linear-gradient(-45deg, transparent 25%, rgba(255,255,255,.2) 25%, rgba(255,255,255,.2) 50%, transparent 50%, transparent 75%, rgba(255,255,255,.2) 75%),
    linear-gradient(45deg, transparent 25%, rgba(255,255,255,.2) 25%, rgba(255,255,255,.2) 50%, transparent 50%, transparent 75%, rgba(255,255,255,.2) 75%);
background-color: #009997;
background-size: 200em 200em;
font-size: .5px;

zincplusplus

/**
 * forest
 */

background: 
linear-gradient(150deg, #48987f 22%, transparent 22%) 0em -40em,
linear-gradient(29deg, #48987f 22%, transparent 22%) 0em -40em,
linear-gradient(150deg, #48987f 32%, transparent 30%),
linear-gradient(29deg, #48987f 32%, transparent 30%);

zincplusplus

/**
 * smiley yahoo inspired
 */

background: 
radial-gradient(circle, #2b37a5 3%, transparent 3%) -6em -7em,
radial-gradient(circle, #2b37a5 3%, transparent 3%) 6em -7em,
radial-gradient(20em -19em, circle, white 15%, transparent 15%) 21em 50em,
radial-gradient(20em -19em, circle, white 15%, transparent 15%) 38em 50em,
radial-gradient(10em -19em, circle, white 15%, transparent 15%) 39em 50em,

zincplusplus

div {
    display: inline-block;   
    border:none;
    border-radius: 100px;
    padding: 10px;
    cursor: pointer;

zincplusplus

/**
 * Penrose triangle
 */

background: 
/* the masks */
linear-gradient(25deg, #1e4a9f 5%, transparent 5%) 48em -35em, linear-gradient(332deg, #1e4a9f 5%, transparent 5%) 47em -90em, linear-gradient(208deg, #1e4a9f 5%, transparent 5%) -44em -92em, linear-gradient(156deg, #1e4a9f 5%, transparent 5%) -42em -40em, linear-gradient(0, #1e4a9f 24%, transparent 15%, transparent 78%, #1e4a9f 76%), linear-gradient(90deg, #1e4a9f 25%, transparent 25%, transparent 75%, #1e4a9f 70%),
/* the shape*/
linear-gradient(-28deg, transparent 83%, #ffa000 83%, #ffa000 88%, transparent 88%) 93em 150em, linear-gradient(225deg, #ffc100 25%, transparent 25%) 0 -66em, linear-gradient(225deg, #fae800 25%, transparent 25%) 0 -84em, linear-gradient(-152deg, transparent 85%, #ffa000 85%, #ffa000 90%, transparent 81%) 93em 138em, linear-gradient(28deg, transparent 80%, #fae800 80%, #fae800 86%, transparent 86%) 154em 52em, linear-gradient(90deg, transparent 82%, #ffc100 82%, #ffc100 90%, transparent 90%) 0em 114em, linear-gradient(-28deg