结合整理的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

css



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

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



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

}

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;

}