在平时的开发中我们经常要使用到小三角
，我们除了使用切出来的图案，还有其他方式来实现这个小三角吗？答案是肯定的，只要通过border这个css属性就可以简单实现啦。
下面让我们一步步来看下是如何实现的。
首先我们来看如下代码
<style type="text/css">
.triangle_test{
width:50px;
height: 50px;
border-width: 15px;
border-color: red green black blue;
border-style: solid;
}
.triangle_test1{
width:100px;
height:100px;
border-width: 15px;
border-color: red green black blue;
border-style: solid;
}
</style>
<body>
<div class="triangle_test"></div>
<p>
<span class="triangle_test1"></span>
<s class="triangle_test1"></s>
</p>
</body>显示结果：
但是如果我们把width 和heigth设置成为0那又变成啥了？
看图可知，对于行内元素width和heigth并不起效果的，所以在triangle_test1中我们需要使用到
font-size:0这个css属性来设置行内元素的高度.
.triangle_test1{
width:0;
height:0;
border-width: 15px;
border-color: red green black blue;
border-style: solid;
font-size:0;
}
到这一步我们就应该知道三角形该怎么实现了吧。
有人说那我只设置border-top的属性，只让踏一个显示不就好了么？真的是这样吗？
然而事实是这样并不能实现。这里通过一个小例子来解释
1.1 设置相邻边框可见
.triangle_1{
width:100px;
height: 100px;
border-width:20px;/* 20px 0 0;*/
border-style: solid;
border-color: red green blue black;
}
显示出来是这样子的，红色边框显示为梯形
.triangle_1{
width:100px;
height: 100px;
border-width:20px 20px 0 0;/*这里有修改*/
border-style: solid;
border-color: red green blue black;
}
看到了吗，红色并不是显示为梯形，黑色不显示的话，他会把部分红色区域覆盖，规律一看就知。
所以使另外三边变为透明即可实现小三角。
2.设置边框颜色透明度
.triangle2{/*兼容各个浏览器*/
width: 0;
height: 0;
border-width: 10px;
border-style:solid; /*dashed dashed dashed/*
border-color: red transparent transparent transparent;
font-size:0;
}但是这个就会导致不能兼容ie6以下的浏览器，因为不识别transparent属性。
所以这里用到了一个ie6以下浏览器的特点就是border-style:dashed这个属性
可以参考文章 http://it.chinawin.net/application/article-180df.html
所以最终的结果为
.triangle2{ /*兼容各个浏览器*/
width: 0;
height: 0;
border-width: 10px;
border-style:solid dashed dashed dashed;
border-color: red transparent transparent transparent;
font-size:0;
}--------------------------------------------------------------------------------
以上只有上下左右三角的画法，接下来我们简单说下左上角三角的画法
这里就可以用到上述文中1.1中的样式
.triangle_1{
width:0;//将width和heigth设置为0
height: 0;
border-width:20px 20px 0 0;
border-style: solid;
border-color: red green blue black;
}
这样我们只要设置border-style:solid dashed dashed dashed;
border-color:red transparent transparent transparent;即可得到红色的左上箭头
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
