小三角如何实现--css-before-after

小三角通过css实现，主要通过 一下两行代码实现，border-right则小三角朝左，若想要朝右，则border-left

 border: solid transparent;     border-right-color:#D2D6DC;

具体代码如下：

首先一个说话框：（.right是为了区分小三角的朝向）

.right .direct-chat-text {
margin-right: 50px;
margin-left: 0;
}
.direct-chat-text {
border-radius: 5px;
position: relative;
padding: 5px 10px;
background: #d2d6de;
border: 1px solid #d2d6de;
margin: 5px 0 0 50px;
color: #444;
}
.right>.direct-chat-text {
background: #f39c12;
border-color: #f39c12;
color: #fff;
}下面是before以及after的css
.right .direct-chat-text:before,.right .direct-chat-text:after{
right:auto;
left:100%;
}
.direct-chat-text:before,.direct-chat-text:after{
position: absolute;
right: 100%;
border: solid transparent;
border-left-color:#D2D6DC;
content: '';
width: 0;
height: 0;
}
.direct-chat-text:before {
border-width: 6px;
margin-top: -6px;
}
.direct-chat-text:after {
border-width: 6px;
margin-top: 15px;
}html代码如下：
<div class="right">
<div class="direct-chat-text">
You better beliece it!
</div>
</div>

相应的其他操作，可以对css进行修改