css--draw a triangle with a border (similar to QQ chat box)

Use CSS to draw the following chat box:

Structure: <div class= "Chat" ></div>

Css:

. Chat{width:300px;Height:80px;Border:1px solid #ccc;position:relative;}. Chat:before{content: "";position:Absolute; Left:-10px;Top:34px;Border-top:6px Solid Transparent;Border-bottom:6px Solid Transparent;Border-right:10px Solid #ccc;}. Chat:after{content: "";position:Absolute; Left:-8px;Top:34px;Border-top:6px Solid Transparent;Border-bottom:6px Solid Transparent;Border-right:10px Solid #fff; }

Use: Before to draw a dark triangle, then use: After drawing a white triangle, two triangles staggered 2px.

css--draw a triangle with a border (similar to QQ chat box)