IllusionMH

/*
 * Изображение с боковыми элементами
 */
 

#wrapper {
	width: 600px;
	margin: 10px auto;
	background-color: transparent;
}

IllusionMH

/**
 * The first commented line is your dabblet’s title
 */

background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height:100%;

IllusionMH

/**
 * Bug with 180deg rotation
 */
 
 div {
 	border: 1px solid black;
 	width: 100px;
 	height: 30px;
 }
 #div2 {

IllusionMH

/**
 * Bug with 180deg rotation
 */
 
 div {
 	border: 1px solid black;
 	width: 100px;
 	height: 30px;
 }
 #div2 {

IllusionMH

/* Common */
html, body {
	background:#eaeaea url(../img/bg.png) repeat;
	font-size:12px;
	font-family:"Open Sans", serif;
	min-width:960px;
	margin:0;
	padding:0;
	color:#aaa;

IllusionMH

.container {
width: 80px;
overflow: hidden;
}
.arrow {
	width: 40px;
	height:30px;
	background: gray;
	box-shadow: 0 0 7px rgba(0,0,0,0.6);
	transform: rotate(24deg) skewX(-45deg) translateX(-9px) translateY(-22px);

IllusionMH

/**
 * Static interpolation via paused animations
 * This technique becomes more useful if you need to interpolate more than 1 properties, and/or if you need multiple values in the spectrum
 * Currently works in every modern browser except Safari
 */

@keyframes foo {
	from { background: red }
	to { background: yellowgreen }
}

IllusionMH

/**
 * The first commented line is your dabblet’s title
 */
body {
	padding: 50px;
}
input {
	display: none;
}
label {

IllusionMH

Win10 Mobile.15215.0

OneNote 17.8241.57592.0 

Experimental features ON   

Good parts:

1. Visual UI is clean