使用CSS3实现小三角的制作:
html代码:
<div class="arrow-up"></div><!--向上的三角-->
<div class="arrow-right"></div><!--向右的三角-->
<div class="arrow-down"></div><!--向下的三角-->
<div class="arrow-left"></div><!--向左的三角-->
CSS3样式部分:
.arrow-up{
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid #f00;
}
.arrow-right {
width:0;
height:0;
border-top:20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid green;
}
.arrow-down {
width:0;
height:0;
border-left:40px solid transparent;
border-right:40px solid transparent;
border-top:40px solid #ccc;
}
.arrow-left {
width:0;
height:0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-right:30px solid #00f;
}
效果图: