CSS アイコン作成

1. CSS ダウンアイコン
.dwnldBtn{
position:relative;
width:38px;
height:35px;
background:-webkit-gradient(linear, left top, left bottom, from(#afbccf),color-stop(0.49,#5a789c),color-stop(0.5,#4b6b91),to(#295987));
border:#093e66 1px solid;
-webkit-border-radius:4px;
}
.dwnldBtn:after,
.dwnldBtn:before,
.dwnldBtn>.pic1:before,
.dwnldBtn>.pic1:after{
content:"";
display:block;
position:absolute;
}
.dwnldBtn:after{
top:8px;
left:16px;
width: 8px;
height: 8px;
background: #fff;
z-index: 5;
}
.dwnldBtn:before{
top:9px;
left:16px;
width:8px;
height:1px;
-webkit-box-shadow:rgba(0,0,0,0.7) 0px -2px 2px;
z-index:4;
}
.dwnldBtn>.pic1{
position:absolute;
display:block;
top:15px;
left:12px;
border:8px solid #fff;
border-color:transparent;
border-top-color:#fff;
z-index:3;
}
.dwnldBtn>.pic1:before{
top:-8px;
left:-8px;
width:16px;
height:1px;
-webkit-box-shadow:rgba(0,0,0,0.3) 0px -1px 1px;
z-index:1;
}
.dwnldBtn>.pic1:after{
top:4px;
left:-8px;
width:16px;
height:3px;
background:#fff;
-webkit-box-shadow:rgba(0,0,0,0.3) 0px -1px 1px;
}

2. CSS スターアイコン
.star{
position: relative;
width:37px;
height:37px;
border:#aa1f49 1px solid;
background:-webkit-gradient(linear, left top, left bottom, from(#f42f2f),color-stop(0.5,#bd110d),to(#933f03));
-webkit-border-radius: 4px;
-webkit-box-shadow:inset rgba(0, 0, 0, 0.5) 0 1px 2px;
}
.star>.pic1{
display:block;
position:absolute;
top:6px;
left:15px;
border-top:0px solid transparent;
border-left:4px solid transparent;
border-right:4px solid transparent;
border-bottom:#f4c22f 12px solid;
z-index:5;
}
.star>.pic1:before,
.star>.pic1:after,
.star>.pic2:before,
.star>.pic2:after,
.star>.pic3:after{
content:"";
display:block;
position:absolute;
}
.star>.pic1:before{
top:7px;
left:-10px;
border-top:0px solid transparent;
border-left:8px solid transparent;
border-right:0px solid transparent;
border-bottom:#f4c22f 12px solid;
-webkit-transform:rotate(-90deg);
z-index:5;
}
.star>.pic1:after{
top:7px;
left:3px;
border-top:0px solid transparent;
border-left:0px solid transparent;
border-right:8px solid transparent;
border-bottom:#f4c22f 12px solid;
-webkit-transform:rotate(90deg);
z-index:5;
}
.star>.pic2{
display:block;
position:absolute;
top:17px;
left:16px;
width:4px;
height:4px;
background: #f4c22f;
z-index:5;
}
.star>.pic2:before{
top:2px;
left:-6px;
border-top:#f4c22f 12px solid;
border-left:6px solid transparent;
border-right:2px solid transparent;
border-bottom:0px solid transparent;
-webkit-transform:rotate(45deg);
z-index:5;
}
.star>.pic2:after{
top:2px;
left:5px;
border-top:#f4c22f 12px solid;
border-left:2px solid transparent;
border-right:6px solid transparent;
border-bottom:0px solid transparent;
-webkit-transform:rotate(-45deg);
z-index:5;
}
.star>.pic3{
display:block;
position:absolute;
top:22px;
left:6px;
width:22px;
height:1px;
background:rgba(255, 255, 255, 0.2);
-webkit-box-shadow: rgba(255, 255, 255, 1) -1px 0px 2px;
-webkit-transform:rotate(40deg);
z-index:1;
}
.star>.pic3:after{
top:-2px;
left:4px;
width:22px;
height:1px;
background:rgba(255, 255, 255, 0.2);
-webkit-box-shadow: rgba(255, 255, 255, 1) -1px 0px 2px;
-webkit-transform:rotate(-80deg);
z-index:1;
}