css3标签设计

设计了三种常用的文章标签，第一个是圆角效果比较简单，主要思路就是非等的对称的圆角；第二个主要应用了ribbon，使用:before生成；第三个就稍微麻烦点，三角加上一个小圆点，使用:before和:after生成，看来不错啊。

demodownload

主要css代码：

/* demo1 */
.demo1 .tag a{
    background-color:#93BD17;
	color:#fff;
	border-radius:8px 5px 8px 5px;
	text-shadow:0 -1px 0 rgba(0,0,0,.2);
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
.demo1 .tag a:hover{
    border-radius:15px 6px 15px 6px;
}
/* demo2 */
.demo2{
    position:relative;
}
.demo2 .tag{
    position:absolute;
	left:-67px;
	top:10px;
}
.demo2 .tag a{
    background-color:#03AEC7;
	color:#fff;
	text-shadow:0 -1px 0 rgba(0,0,0,.2);
	position:relative;
	display:block;
	margin:0 0 10px;
	-webkit-box-shadow:-5px 0 5px -5px rgba(0, 0, 0, 0.3) inset;
	-moz-box-shadow:-5px 0 5px -5px rgba(0, 0, 0, 0.3) inset;
	box-shadow:-5px 0 5px -5px rgba(0, 0, 0, 0.3) inset;
}
.demo2 .tag a:before{
    content:'';
	width:0;
	height:0;
	position:absolute;
	left:-10px;
	top:0;
	border-left:10px solid transparent;
	border-top:12px solid #03AEC7;
	border-bottom:12px solid #03AEC7;
}
/* demo3 */
.demo3 .tag a{
    background-color:#F89406;
	color:#fff;
	text-shadow:0 -1px 0 rgba(0,0,0,.2);
	position:relative;
}
.demo3 .tag a:before{
	content:'';
	width:0;
	height:0;
	position:absolute;
	left:-10px;
	top:0;
	border-right:10px solid #F89406;
	border-top:12px solid transparent;
	border-bottom:12px solid transparent;    
}
.demo3 .tag a:after{
    content:'';
	width:4px;
	height:4px;
	position:absolute;
	left:-4px;
	top:10px;
	background-color:#fff;
	border-radius:4px;
}

demodownload