三角箭头的实现

涉及知识：
1.border-radius

代码：
html:
<span class="dot-down"></span>

css:
/* 向上的箭头 /
.dot-up {
display: inline-block;
font-size: 0;
line-height: 0;
border-width: 8px;
border-color: #00B39E;
border-top-width: 0;
border-style: dashed;
border-bottom-style: solid;
transform: rotate(180deg);
border-left-color: transparent;
border-right-color: transparent;
}
/ 向下的箭头 */
.dot-down {
display: inline-block;
font-size: 0;
line-height: 0;
border-width: 8px;
border-color: #F2423A;
transform: rotate(180deg);
border-bottom-width: 0;
border-style: dashed;
border-top-style: solid;
border-left-color: transparent;
border-right-color: transparent;
}

最终效果

image.png