图标自动排列css,css实现排序升降图标

效果图:

code:

Title

.on {

border-bottom: 2px solid #e61773;

width: 150px;

height: 40px;

display: table-cell;

position: relative;

}

.on a {

display: block;

overflow: hidden;

width: 100%;

height: 30px;

line-height: 30px;

text-align: center;

color: #5e5e5e;

}

.angle_top {

content: '';

width: 0;

height: 0;

display: block;

border-style: solid;

border-width: 0 6px 6px;

border-color: transparent transparent #5e5e5e;

position: absolute;

transform: rotate(180deg);

bottom: 14px;

right: 17px;

}

.angle_bottom {

content: '';

width: 0;

height: 0;

display: block;

border-style: solid;

border-width: 0 6px 6px;

border-color: transparent transparent #5e5e5e;

position: absolute;

top: 10px;

right: 17px;

}

价格