css3实现三角形指向的div

前言

在上一篇的博客《css3实现各种角度的三角形》中，已经简单的介绍了各种用法，下面我们更深入地学习如何将这个三角形和div绑在一起。

设计

首先创建一个div，再通过：before或者：after在div前面或者后面添加一个三角形，将这个三角形作为一个块级，这个三角形的位置是相对于这个div相互绑定的。

html：

<div class="main">
     <div class="down">
			
     </div>
</div>

css:

div.main{
    margin:0 auto;
    margin-top:20px;
    width:280px;            
    background:#abc;
    padding:10px;
    height:500px;
    /*设置圆角*/
  -webkit-border-radius:5px;
  -moz-border-