* {
	margin:0;
	padding:0;
	list-style:none;
}
body {
	background-color:#999;
}
ul {
	width:900px;
	margin:100px auto;
	height:80px;
	position:relative;
}
ul::after,ul::before {
	content:"";
	position:absolute;
	width:100px;
	height:80px;
	background-color:#ccc;
	left:-100px;
}
ul::after {
	/* left 设置auto，左边的left 属性 不在控制 left 值 */
            left:auto;
	right:-100px;
}
ul li {
	float:left;
	width:180px;
	height:80px;
}
ul li span {
	float:left;
	height:80px;
}
ul li .left,ul li .right {
	width:30px;
	height:100%;
	background-color:#ccc;
}
ul li .center {
	width:120px;
	height:80px;
	background-color:#ccc;
	text-align:center;
	line-height:80px;
	font-size:24px;
	font-family:"Microsoft Yahei";
}
ul li:hover .left {
	transform-origin:left;
	transform:skew(0deg,-30deg);
	background-color:#c1c1c1;
	box-shadow:10px 20px 20px  -10px #666;
}
ul li:hover .center {
	transform:translateY(-17px);
	text-shadow:5px 5px 3px #666;
	box-shadow:0 20px 20px -10px #666;
}
ul li:hover .right {
	transform-origin:right;
	transform:skew(0deg,30deg);
	background-color:#c1c1c1;
	box-shadow:-10px 20px 20px  -10px #666;
}