几种常用的css三角形
startXUEBA 2016-05-30
html:
<divclass="triangle_border_up">
<span></span>
</div>
<!--向下的三角形-->
<divclass="triangle_border_down">
<span></span>
</div>
<!--向左的三角形-->
<divclass="triangle_border_left">
<span></span>
</div>
<!--向右的三角形-->
<divclass="triangle_border_right">
<span></span>
</div>
css:
/*向上*/
.triangle_border_up{
width:0;
height:0;
border-width:030px30px;
border-style:solid;
border-color:transparenttransparent#333;/*透明透明灰*/
margin:40pxauto;
position:relative;
}
.triangle_border_upspan{
display:block;
width:0;
height:0;
border-width:028px28px;
border-style:solid;
border-color:transparenttransparent#fc0;/*透明透明黄*/
position:absolute;
top:1px;
left:-28px;
}
/*向下*/
.triangle_border_down{
width:0;
height:0;
border-width:30px30px0;
border-style:solid;
border-color:#333transparenttransparent;/*灰透明透明*/
margin:40pxauto;
position:relative;
}
.triangle_border_downspan{
display:block;
width:0;
height:0;
border-width:28px28px0;
border-style:solid;
border-color:#fc0transparenttransparent;/*黄透明透明*/
position:absolute;
top:-29px;
left:-28px;
}
/*向左*/
.triangle_border_left{
width:0;
height:0;
border-width:30px30px30px0;
border-style:solid;
border-color:transparent#333transparenttransparent;/*透明灰透明透明*/
margin:40pxauto;
position:relative;
}
.triangle_border_leftspan{
display:block;
width:0;
height:0;
border-width:28px28px28px0;
border-style:solid;
border-color:transparent#fc0transparenttransparent;/*透明黄透明透明*/
position:absolute;
top:-28px;
left:1px;
}
/*向右*/
.triangle_border_right{
width:0;
height:0;
border-width:30px030px30px;
border-style:solid;
border-color:transparenttransparenttransparent#333;/*透明透明透明灰*/
margin:40pxauto;
position:relative;
}
.triangle_border_rightspan{
display:block;
width:0;
height:0;
border-width:28px028px28px;
border-style:solid;
border-color:transparenttransparenttransparent#fc0;/*透明透明透明黄*/
position:absolute;
top:-28px;
left:-29px;
}
