一直都在看站友们的作品，今天也来给大家分享一个小的效果，第一次发还有点小紧张呢，语言表达能力不是很好，还请见谅…^
先来个简单点的吧，上效果图
刚开始在网上看到效果图的时候感觉好神奇，当我试着写出来的时候发现，哇！原来这么简单，我这脑袋瓜咋没反应过来呢，所以整理了下顺便简化了分享出来，希望对大家有帮助。
<div class="demo"></div>
<style>
.demo{
width:0;
height:0px;
border:100px solid transparent;
border-color:#f00 #ff0 #05f #0f0;
}
</style>
OK了，直接设置一个边框的大小，然后颜色顺序：上、右、下、左；是不是感觉很神奇呢。
来接着第二个，这是由3个标签组成的，还是先上效果图：
源代码先贴这儿：
<div class="demo">
<div class="out"></div>
<div class="in"></div>
</div>
先用一个大的div设置边框样式、相对定位，样式如下：
.demo{
width:200px;
height:200px;
border:2px solid #f30;
position:relative;
}
接下来是上面的小箭头，如果是实心的就用一个标签就可以了，这里是空心的所以我就用了两个标签
先把箭头一样的样式写一起
.out,.in{
position:absolute;
width:0;
height:0px;
}
接下来是箭头的边框了，就是这里的out标签
.out{
border:20px solid transparent;
border-bottom-color:#f30; /*这里的颜色一定要跟上面demo边框颜色一样*/
top:-40px;
left:20%;
}
如果是实心的箭头到这一步就可以了哦·还是来张效果图吧
接下来继续把箭头变成空心的，原理跟上面实心的一样，只需要把它的大小变小一点，位置移一下，颜色跟demo背景颜色一样就ok了；
.in{
border:18px solid transparent;
border-bottom-color:#fff;/*这里的颜色一定要跟demo背景颜色一样*/
top:-35px;
left:21%;
}
这样一个带箭头边框的样式就完成了，是不是很简单呢，欢迎补充，欢迎指教！
http://www.zcool.com.cn/article/ZMTU2NTky.html
