css写箭头，三角形

箭头

向上的箭头

image.png

.icon-up {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-left: 2px solid #999;
    border-top: 2px solid #999;
    transform: rotate(45deg);
}

如果想得到其他方向的箭头，只需要转动角度就可transform: rotate(45deg);

.icon-right {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-left: 2px solid #999;
    border-top: 2px solid #999;
    transform: rotate(135deg);
}
.icon-down {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-left: 2px solid #999;
    border-top: 2px solid #999;
    transform: rotate(225deg);
}
.icon-left {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-left: 2px solid #999;
    border-top: 2px solid #999;
    transform: rotate(315deg);
}

这样就得到了上下左右的箭头，如图：

image.png

三角形

image.png

.icon-up {
    display: inline-block;
    width: 0;
    height: 0;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 10px solid red;
}
.icon-right {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid red;
}
.icon-down {
    display: inline-block;
    width: 0;
    height: 0;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 10px solid red;
}
.icon-left {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid red;
}