利用css制作三角形7.12

三角形的颜色：容器的边框颜色设置三角形的颜色；

三角形的高：容器边框的边框粗细设置三角形的高度；

三角形的底边长：2倍的边框粗细等于三角形的底边长。

原理：容器div两个邻边的边框颜色变透明；对边消失；让产生三角形的div宽高均设置为0；

例：向右指向的三角形。

    .box{

           width:0; height: 0;

           border:solid 20px orange;

           border-top-color: transparent;

           border-bottom-color: transparent;

           border-right: none;

        }

在css中设置三角形：

1、对四个方向指向的三角形进行CSS代码的封装：

      .triangle{ 

           width:0; height:0;

           border:solid 20px #3385ff;

        }

      指向左侧的三角形：

      .triangle-left{ 

           border-top-color: transparent;

           border-bottom-color: transparent;

           border-left: none;

       }

      直向右侧的三角形

     .triangle-right{  

           border-top-color: transparent;

           border-bottom-color: transparent;

           border-right: none;

        }

    指向顶端的三角形

    .triangle-top{

           border-left-color: transparent;

           border-right-color: transparent;

           border-top:none;

        }

      指向低端的三角形

     .triangle-bottom{

           border-left-color: transparent;

           border-right-color: transparent;

           border-bottom: none;

        }

在html中用类名引用：

        <div class="triangle triangle-right"></div>

        <div class="triangle triangle-bottom"></div>

        <div class="triangle triangle-left"></div>

        <div class="triangle triangle-top"></div>