在实际样式中经常会遇到要写类似对话框的样式，而这种样式往往会有一个小三角，如下所示：
那么如何用css写出来呢，其实很简单，先让父元素相对定位，然后运用css的伪类before或after。就可以写个三角形，如果想要带边框的三角形，则可以两个重叠使用。代码如下：
<div class="box2"> ???纯css写带小三角对话框</div>.box2{ ?????float:left; ?????position:relative; ?????width:200px; ?????height:100px; ?????border:1px solid #00f; ?????margin:50px; ?????box-sizing:border-box; ?????font-size:14px; ?????padding:10px; ?????box-shadow:0 0 2px rgba(0,0,0,.5) ?} ?.box2:before,.box2:after{ ?????position:absolute; ?????content:‘‘; ???border:10px solid;} ?.box2:before{ ?????right: -20px; ???top:20px; ???border-color: transparent transparent transparent #00f;} ?.box2:after{ ?????border-color: transparent transparent transparent #fff; ???right: -18px; ???top: 20px;} ?