css加号图标_css3实现各种小图标

加号和减号图标html>

标题

.jia,

.jian {

width: 15px;

height: 15px;

background: #848484;

border-radius: 100%;

position: relative;

display: inline-block;

}

.jia:after,

.jia:before,

.jian:before {

position: absolute;

content: '';

width: 9px;

height: 2px;

background: #fff;

transform: rotate(0deg);

top: 6px;

left: 3px;

}

.jia:after {

transform: rotate(-90deg);

}

上，下，左，右实心箭头html>

标题

.arrow-up,

.arrow-down,

.arrow-left,

.arrow-right {

display: inline-block;

width: 0;

height: 0;

border: 8px solid transparent;

}

.arrow-up {

border-bottom-color: #868686;

}

.arrow-down {

border-top-color: #868686;

}

.arrow-left {

border-right-color: #868686;

}

.arrow-right {

border-left-color: #868686;

}