用border画小三角形的原理:div宽高为0,把border的一条边设置实线和颜色,通过控制不同边的显示,画不同方向的三角形。
<html>
<style type="text/css">
.test1{
width:0px;
height:0px;
border-style:solid;
border-width:10px;
border-color:red blue green pink;
}
</style>
</head>
<body>
<div class="test1"></div>
</body>
</html>
运行结果:
<html>
<head>
<style type="text/css">
.test1{
width:0px;
height:0px;
border-style:solid dashed dashed dashed ;/*设置dashed为了兼容ie浏览器*/
border-width:10px;
border-color:red transparent transparent transparent;/*只有上部分有颜色*/
}
</style>
</head><body>
<div class="test1"></div>
</body>
</html>
运行结果:
用border画小三角形OK。