关闭图标
.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;
}
