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-radius:5px;
border-radius:5px;
}
div.down{
width: 200px;
height: 200px;
background: #aaa;
position:relative;
}
div.down::after{
content:"";
display:block;
position:absolute;
/*top:230px;*/
bottom:-20px;
left:-moz-calc(50% - 10px);
/*chrome safari*/
left:-webkit-calc(50% - 10px);
left: calc(80%);
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:20px solid #dea;
}

这个绑定的div必须要设置一个position属性，非等于static的值，因为在前面：before添加的这个三角形div是相对于绑定的div进行定位的，left,right,bottom,top,元素会寻找最近父级的有position属性的div定位，如果position=‘relative’的话，是相对该元素原来默认（没有文档流）的位置定位，并没有脱离文档流，仍然占有位置，如果position=“absolute”的话，是绝对定位，是脱离文档流的，相当于在不同的层面，所以对于这个绑定的div，一般建议脱离文档流，即绑定的弹出div设置position=“absolute”

，初始化时，并将其隐藏起来。

特变要注意的是，在：before时样式中必须设置content：'' ",否则这个伪元素是无效无用的。