用纯Css作三角形
<style>
//向上三角形
.triangle_up{
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid red;
}
//向下三角形
.triangle_up{
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-top:30px solid red;
}
//向左三角形
.triangle_up{
width:0;
height:0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-right:30px solid red;
}
//向右三角形
.triangle_up{
width:0;
height:0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-left:30px solid red;
}
</style>
<body>
<div class="triangle_up"></div>
<div class="triangle_down"></div>
<div class="triangle_left"></div>
<div class="triangle_right"></div>
</body>
综上所述：你所要的三角形朝向是跟代码所写是对立的。比如：朝上的三角形，你就得用border-bottom；朝左，你就得用border-right;如此。。。
