css3-绘制三角形

xyc

   今天做项目遇到了绘制三角形的问题，下面咱就来说说用css来实现上下左右三角形的方法。

  1.新建一个div

[HTML] 纯文本查看 复制代码

<div class="div"></div>

2.添加样式
  （1）向上的效果
      

[CSS] 纯文本查看 复制代码

.div{
	width:0;
        height:0;
	border-right:50px solid transparent;
	border-left:50px solid transparent;
	border-bottom:50px solid red;
}

    （2）向下的效果
      

[CSS] 纯文本查看 复制代码

.div{
	width:0;
	height:0;
	border-right:50px solid transparent;
	border-left:50px solid transparent;
	border-top:50px solid red;
}

     （3）向左的效果
      

[CSS] 纯文本查看 复制代码

.div{
	    width:0;
	    height:0;
	    border-top:50px solid transparent;
	    border-bottom:50px solid transparent;
	    border-right:50px solid red;
	}

       （4）向右的效果


         

[CSS] 纯文本查看 复制代码

.div{
	    width:0;
	    height:0;
	    border-top:50px solid transparent;
	    border-bottom:50px solid transparent;
	    border-left:50px solid red;
	}

  以上就是css实现三角形的效果，希望能帮助到大家！