小三角如何實現--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進行修改