CSS-border 实现三角

边框线形成角度

 .div::before{
     content: " ";
     width: 0;
     height: 0;
     position: absolute;
     top: 0;
     left: 84px;
     /*border-color: transparent white transparent transparent;
     border-style: solid;
     border-width: 22px 8px 0 0;*/
     border-top:solid 22px transparent;
     border-right:solid 8px white;
     border-bottom:solid 0 transparent;
     border-left:solid 0 transparent; }

border-style

none: 默认无边框
dotted: 定义一个点线框
dashed: 定义一个虚线框
solid: 定义实线边界
double: 定义两个边界。 两个边界的宽度和border-width的值相同
groove: 定义3D沟槽边界。效果取决于边界的颜色值
ridge: 定义3D脊边界。效果取决于边界的颜色值
inset:定义一个3D的嵌入边框。效果取决于边界的颜色值
outset: 定义一个3D突出边框。 效果取决于边界的颜色值