原来css的渐变+旋转可以这么用的！！！

存css实现的效果 <无>

源码与演示：源码出处 演示出处

/*皮肤菜单*/
.skin {
	height: 50px;
	width: 300px;
	margin: 20px;
	box-shadow: -2px -1px 1px rgba(0,0,0,0.5), 1px 2px 2px rgba(0,0,0,0.8);
	-o-box-shadow: -2px -1px 1px rgba(0,0,0,0.5), 1px 2px 2px rgba(0,0,0,0.8);
	-moz-box-shadow: -2px -1px 1px rgba(0,0,0,0.5), 1px 2px 2px rgba(0,0,0,0.8);
	-webkit-box-shadow: -2px -1px 1px rgba(0,0,0,0.5), 1px 2px 2px rgba(0,0,0,0.8);
	border-radius: 3px;
	-o-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.angle {
	float:right;
	width: 50px;
	height: 50px;
	border-radius: 3px;
	-o-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.icon {
	position: relative;
	right: -25px;
	top: 16px;
	transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	color: white;
}
.red {
	color: red;
}
.red .angle {
	background: linear-gradient(45deg,rgba(0,0,0,0) 34px,red 36px);
	background: -o-linear-gradient(45deg,rgba(0,0,0,0) 34px,red 36px);
	background: -moz-linear-gradient(45deg,rgba(0,0,0,0) 34px,red 36px);
	background: -webkit-linear-gradient(45deg,rgba(0,0,0,0) 34px,red 36px);
}
.orange {
	color: orange;
}
.orange .angle {
	background: linear-gradient(45deg,rgba(0,0,0,0) 34px,orange 36px);
	background: -o-linear-gradient(45deg,rgba(0,0,0,0) 34px,orange 36px);
	background: -moz-linear-gradient(45deg,rgba(0,0,0,0) 34px,orange 36px);
	background: -webkit-linear-gradient(45deg,rgba(0,0,0,0) 34px,orange 36px);
}
.blue {
	color: blue;
}
.blue .angle {
	background: linear-gradient(45deg,rgba(0,0,0,0) 34px,blue 36px);
	background: -o-linear-gradient(45deg,rgba(0,0,0,0) 34px,blue 36px);
	background: -moz-linear-gradient(45deg,rgba(0,0,0,0) 34px,blue 36px);
	background: -webkit-linear-gradient(45deg,rgba(0,0,0,0) 34px,blue 36px);
}

/*选项列表*/
.clear {clear: both}
.item {
	float:left;
	height: 12px;
	width: 12px;
	position: relative;
	top: 3px;
	background: linear-gradient(45deg,rgba(0,0,0,0) 8px,red 9px);
	background: -o-linear-gradient(45deg,rgba(0,0,0,0) 8px,red 9px);
	background: -moz-linear-gradient(45deg,rgba(0,0,0,0) 8px,red 9px);
	background: -webkit-linear-gradient(45deg,rgba(0,0,0,0) 8px,red 9px);
	transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}
.content {
	float:left;
	margin-left: 5px;
	height: 22px;
	text-decoration: underline;
}