css加号图标_利用border特性做的几个纯css小图标

css小图标

i{display:inline-block;

}

/*三道杠*/.icon-threeline{width:60px;height:10px;/*双线边框和实线变宽的间距*/border-top:30px double #000;/*双线边框*/border-bottom:10px solid #000;/*实线变宽*/

}

/*加号图标*/.icon-add{width:60px;height:60px;color:#ccc;border:2px dashed;position:relative;overflow:hidden;-webkit-transition:color 0.25s;-moz-transition:color 0.25s;-ms-transition:color 0.25s;-o-transition:color 0.25s;transition:color 0.25s;

}.icon-add:before,.icon-add:after{content:"";position:absolute;left:50%;top:50%;

}.icon-add:before{width:3px;border-top:13px solid;margin:-6.5px 0 0 -1.5px;

/*-1.5px-->width: 3px;width的一半

-6.5px-->border-top: 13px; border厚度的一半*/

}.icon-add:after{height:3px;border-left:13px solid;margin:-1.5px 0 0 -6.5px;

}.icon-add:hover{color:#99cccc;-webkit-transition:color .25s;-moz-transition:color .25s;-ms-transition:color .25s;-o-transition:color .25s;transition:color .25s;

}

/*三角形*/.icon-triangle-down{width:0;border:20px solid;border-color:#ffcccc transparent transparent;

}.icon-triangle-up{width:0;border:20px solid;border-color:transparent transparent #ffcccc;

}.icon-triangle-left{width:0;border:20px solid;border-color:transparent #ffcccc transparent transparent;

}.icon-triangle-right{width:0;border:20px solid;border-color:transparent transparent transparent #ffcccc;

}

/*更窄和更宽的三角形*/.icon-triangle-01{width:0;border-style:solid;border-width:20px 10px;border-color:#99cccc transparent transparent;

}.icon-triangle-02{width:0;border-style:solid;border-width:20px 25px;border-color:#99cccc transparent transparent;

}

/*直角三角形*/.icon-triangle-03{width:0;border-style:solid;border-width:20px;border-color:#f30 #f30 transparent transparent;

}.icon-triangle-04{width:0;border-style:solid;border-width:20px;border-color:transparent transparent #f30 #f30;

}

/*三角形拓展--对话框*/.box{max-width:160px;padding:0px 8px;color:#fff;background-color:#666666;border-radius:5px;

}.box p,.box2 p{display:inline-block;

}.box2{display:inline-block;width:160px;padding:0px 8px;color:#fff;background-color:#666666;position:relative;left:-15px;top:-15px;

}.icon-triangle-05{width:0;border-style:solid;border-width:9px;border-color:#666 #666 transparent transparent;margin-left:20px;

}.icon-triangle-06{margin-top:50px;width:0;border-style:solid;border-width:9px 25px;border-color:#666 #666 transparent transparent;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);

}

/*叉叉图标*/.icon-no{width:60px;height:60px;position:relative;color:#ccc;background-color:#ea9999;border-radius:50%;

}.icon-no:after,.icon-no:before{content:"";height:5px;border-left:40px solid #fff;position:absolute;top:50%;left:50%;margin:-2.5px 0 0 -20px;

}.icon-no:after{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);

}.icon-no:before{-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-ms-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg);

}

/*勾勾图标*/.icon-ok{margin-left:20px;width:60px;height:60px;position:relative;color:#ccc;background-color:#b6d7a8;border-radius:50%;

}.icon-ok:after,.icon-ok:before{content:"";position:absolute;top:50%;left:50%;

}.icon-ok:after{height:5px;border-left:30px solid #fff;margin:-2.5px 0 0 -10px;-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-ms-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg);

}.icon-ok:before{height:5px;border-left:18px solid #fff;margin:5px 0 0 -20px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);

}

三道杠小图标

加号图标

三角形小图标

更窄和更宽的三角形小图标

直角三角形小图标

三角形小图标拓展--对话框

对话框1

对话框2