利用border制作三角形以及箭头

[54leibo]

// 宽度和高度设置为0，再把另外三个border背景设置为transparent
#box{
 position: relative;
 width:0;
 height:0;
 border: 20px solid transparent;
 border-top-color:red;
 border-bottom-width:0;
}

// 如果需要空心三角形（箭头），利用before再叠加一个，正确设置其背景色，border宽度小一个像素，调整left和top值即可
#box: before {
 content: ' ';
 position: absolute;
 left: -19px;
 top: -21px;
 width:0;
 height:0;
 border: 19px solid transparent;
 border-top-color:#fff;
 border-bottom-width:0;
}