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度后发现相对于原来来说是右和下是有边框的。所以设置边框。就可以实现了。