//html： <div> </div>
三角形思路： 元素宽高设置为0 border的四边设置 宽度 实线 颜色（三边设置透明， 一边设置颜色）
//css:样式
div {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid red;
}
//菱形思路： 用定位将两个三角形拼接
//css:样式
div {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid red;
position: relative;
}
div::before {
content: '';
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-top: 10px solid red;
left: -10px;
top: 10px;
position: absolute;
}
// 箭头思路： 两个三角形层叠 用定位平行隔离两个像素
// css样式
div {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid red;
position: relative;
}
div::before {
content: '';
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid #fff;
left: -10px;
top: -8px;
position: absolute;
}
