CSS绘制三角形方法一

	 .arrow:before{
		content:"";
		width:0;
		height:0;
		border:10px solid red;
		position:absolute;
		top:0;
		left:0;
		/*
			三角向右
			border-color: transparent transparent transparent #000;
		*/
		/*
			三角向下
			border-color:#000 transparent transparent ;
		/*
			三角向上
			border-color:transparent transparent #000;
		*/
		/*三角向左*/
		border-color: transparent #000 transparent transparent;/* #000：三角形颜色 */
	 }

CSS绘制三角形方法二

.sanjiao {
    width: 0;
    height: 0;
    display: inline-block;
    border: 200px solid #fff; /* 三角形大小 */

    /*

    如想改变三角形的方向只需要给指定的方向设置颜色，

    同时将其他的方向设置为transparent即可。

    ps：设置的方向与真实方向相反 例如：

    border-top: 200px solid red;箭头方向向下。 

    */
    border-bottom: 200px solid transparent;
    border-top: 200px solid red;
    border-left: 200px solid transparent;
    border-right: 200px solid transparent;