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;
}