css实现三角形

css实现三角形是经常被问到的问题。
所以下来就讲一下css实现三角形的三种方法：
①.

.tritangle1{        width:0;        height:0;        border-left: 50px solid transparent;        border-right:50px solid transparent;        border-bottom:100px solid red;//这是一个向上的箭头，向左向右向下可以自己写。    }

②.

.list3{        width: 0px;        height: 0px;        border-width:50px;        border-style: solid;        border-color:transparent transparent transparent orange;    }

transparent设置时透明的。顺序为上右下左。
③。实现类似于对话框的形式。

底下的三角形的实现是两个三角形。一个是背景色，一个是边框色。背景色的比边框色少1px，且利用背景色覆盖在边框色上面，就看到的只是边框了。
首先先对元素进行定位。

    .messageBox{        position:relative;        width: 240px;        height: 60px;         border:1px solid blue;        background-color: lightgreen;    }    .trangle{        position: absolute;        top:60px;        left: 30px;        width: 0px;        height: 0px;        border-width: 10px;        border-style:solid dashed dashed dashed;    }    .border{ //下面背景色是蓝色的三角形，一会会被上面淡绿色的覆盖掉，只留下蓝色边框        border-color: blue transparent transparent transparent;    }    .bg{        top:59px; //背景的话就稍微往上移一点就可以看到蓝色边框了。        border-color: lightgreen transparent transparent transparent;    }

HTML：

<div class = "messageBox">    <span>这是一段话</span>    <div class  = "trangle border"></div>    <div class = "trangle bg"></div></div>

④。再做一个对话框，利用css3的transform的旋转45度的方法。

<div class = "messageBox1">    <span>这是一段话</span>    <div class  = "trangle1"></div></div>

实现的原理是利用一个大的框和一个小的正方形（将来要旋转成三角形的）组成的，首先定位。

.messageBox1{        position:relative;        width: 240px;        height: 60px;         border:1px solid blue;        background-color: lightgreen;    }    .trangle1{        position: absolute;        top:55px;        left: 30px;        width: 10px;        height: 10px;        border:1px;        border-style: solid ;        transform:rotate(45deg);        background-color: lightgreen;        border-color:lightgreen blue blue lightgreen;    }

对于底下三角形的边框就是旋转45度后发现相对于原来来说是右和下是有边框的。所以设置边框。就可以实现了。