用css border画三角形before after气泡三角

border 三角

div{
	display:inline-block;
	width:0;
	height:0;
	border:10px solid;
	border-color:red green blue yellow;
}

气泡三角

1 div叠加
通过div模拟before after实现，不如 before after方便
2 brfore after

#demo{
			  width:100px;
			  height:100px;
			  border:2px solid #000;
			  position:relative;
			}
			
			/* 白色小三角形叠加在黑色大三角形上面，就只剩下2px的黑边了，实现了右边的小凸起效果 */
			
			#demo:before{
			  content:"";
			  width:0;
			  height:0;
			  position:absolute;
			  left:100px;
			  top:18px;
			  border-top:solid 12px transparent;
			  border-left:solid 12px black;       /* 黑色大三角形 */
			  border-bottom:solid 12px transparent;
			}
			
			#demo:after{
			  content:"";
			  width:0;
			  height:0;
			  position:absolute;
			  left:100px;
			  top:20px;
			  border-top:solid 10px transparent;
			  border-left:solid 10px white;     /* 白色小三角形 */
			  border-bottom:solid 10px transparent;
			}