性别 图标 css,CSS实现小图标

关闭图标

.close {

position: relative;

display: inline-block;

width: 12px;

height: 12px;

}

.close:before {

content: '';

display: inline-block;

position: absolute;

top: 6px;

width: 12px;

border-top: 1px solid #ddd;

transform: rotate(45deg);

}

.close:after {

content: '';

display: inline-block;

position: absolute;

top: 6px;

width: 12px;

border-top: 1px solid #ddd;

transform: rotate(-45deg);

}

箭头图标

右箭头

.arrow {

display: inline-block;

width: 8px;

height: 8px;

border-top: 1px solid #ddd;

border-right: 1px solid #ddd;

transform: rotate(45deg);

}

左箭头

.arrow {

display: inline-block;

width: 8px;

height: 8px;

border-bottom: 1px solid #ddd;

border-left: 1px solid #ddd;

transform: rotate(45deg);

}

下箭头

.arrow {

display: inline-block;

width: 8px;

height: 8px;

border-right: 1px solid #ddd;

border-bottom: 1px solid #ddd;

transform: rotate(45deg);

}

上箭头

.arrow {

display: inline-block;

width: 8px;

height: 8px;

border-top: 1px solid #ddd;

border-left: 1px solid #ddd;

transform: rotate(45deg);

}

三角形

下三角

.triangle {

position: relative;

display: inline-block;

width: 8px;

height: 8px;

overflow: hidden;

}

.triangle:after {

content: '';

position: absolute;

top: 2px;

display: inline-block;

border-top: 4px solid #ddd;

border-right: 4px solid transparent;

border-bottom: 4px solid transparent;

border-left: 4px solid transparent;

}

上三角

.triangle {

position: relative;

display: inline-block;

width: 8px;

height: 8px;

overflow: hidden;

}

.triangle:after {

content: '';

position: absolute;

bottom: 2px;

display: inline-block;

border-top: 4px solid transparent;

border-right: 4px solid transparent;

border-bottom: 4px solid #ddd;

border-left: 4px solid transparent;

}

右三角

.triangle {

position: relative;

display: inline-block;

width: 8px;

height: 8px;

overflow: hidden;

}

.triangle:after {

content: '';

position: absolute;

left: 2px;

display: inline-block;

border-top: 4px solid transparent;

border-right: 4px solid transparent;

border-bottom: 4px solid transparent;

border-left: 4px solid #ddd;

}

左三角

.triangle {

position: relative;

display: inline-block;

width: 8px;

height: 8px;

overflow: hidden;

}

.triangle:after {

content: '';

position: absolute;

right: 2px;

display: inline-block;

border-top: 4px solid transparent;

border-right: 4px solid #ddd;

border-bottom: 4px solid transparent;

border-left: 4px solid transparent;

}