结合整理的css用border画三角形的原理

1、html

<a href='###' class='trange'></a>

css

上三角

.trange{bordor-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid  #000;width:0;height:0;}左右有边框但是透明，后面用底部的颜色和边框填充

2、利用叠加层来画带边框的三角形

是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。整体就能形成带边框三角形的假象

html

<!-- 向上的三角形 -->

< div class="triangle_border_up">

     < span ></ span >

</ div >

css

/*向上*/

.triangle_border_up{

     width:0;

     height:0;

     border-width:0 30px 30px;

     border-style:solid;

     border-color:transparent transparent #333;/*透明 透明  灰 这个相当于简写吧*/

     margin:40px auto;

     position:relative;

}

.triangle_border_up span{

     display:block;

     width:0;

     height:0;

     border-width:0 28px 28px;

     border-style:solid;

     border-color:transparent transparent #fc0;/*透明 透明  黄*/

     position:absolute;

     top:0px;

     left:0px;

}




 

绝对定位（position:absolute），是根据相对定位父层内容的边界计算的。

再结合上篇我们最开始写的宽高为0的空div:

 

这个空的div，content的位置在中心，所以内部三角形是根据中心这个点来定位的。

.triangle_border_up{

     width:0;

     height:0;

     border-width:0 30px 30px;

     border-style:solid;

     border-color:transparent transparent #333;/*透明 透明  灰 这个相当于简写吧*/

     margin:40px auto;

     position:relative;

}

.triangle_border_up span{

     display:block;

     width:0;

     height:0;

     border-width:0 28px 28px;

     border-style:solid;

     border-color:transparent transparent #fc0;/*透明 透明  黄*/

     position:absolute;

     top:1px;

     left:-28px;

}

3.1、利用叠加层来画4个三角形

html

尝试解释原理：

<span class='arr_down test'>

<a class='arr_down' href='javascript:;'></a>

</span>

css

.arr_down{

position:relative;

}

.arr_down a{

position:absolute;

display:block;

border:4px solid green;颜色为绿色

border-color:green   orange;和margin的用法方位一样的不同方向不同颜色

border-width:10px 10px 0px 10px;

bottom:0px;

}//这里就可以构建一个长方形，因为底部没有宽度  也就是不要后面的代码，将上面width添加为0px-10px就是4个三角形了，这里一定要用定位，不然整个是长方形了是可视宽度

.test a{

border-color:red blue orange gray;

border-width:20px 20px 20px 20px;

}

3.2、4个三角形

html

<div id='tri'></div>

css

#tri{

width: 0px;

height: 0px;

   border-top: 400px solid red;

   border-right: 400px solid blue;

   border-bottom: 400px solid green;

   border-left: 400px solid yellow;

}