css画箭头,三角形

箭头

.arrow{
  border: solid black;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 4px;
}
//向上
.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
//向下
.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
//向右
.right{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
//向左
.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
 

三角形

//需要哪个朝向的三角形,将哪条边设置你要的颜色,其余三条边设置为透明色即可
.triangle{
    width: 0px;
    height: 0px;
    border-top: 10px solid black;
    border-right: 10px solid black;
    border-bottom: 10px solid black;
    border-left: 10px solid black;
}