三角形可用CSS的border实现。
0;
height:0;
border-right:10px solid red;
border-top:10px solid transparent;//设置透明
border-bottom:10px solid transparent;
三角形 顶点在哪边 就 不设置哪边的border值 ，三角形向左或向右，则设置border的顶部和底部为相同像素的透明色。三角形的高则为像素的点素，即px值。
另外CSS选择器中，after和before表示在前后插入内容。
eg:请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：
<div id=”demo”></div>
#demo{
100px;
height:100px;
border: 2px solid #000;
position:relative;
}
#demo:after,#demo:before{
0px;
height:0px;
position:absolute;
left:100%:
}
#demo:after{
border-top:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid #fff;
top:20px;
}
#demo:before{
border-top:12px solid transparent;
border-bottom: 12px solid transparent;
border-left:12px solid #000;
top:18px;
}