話不多說先上效果圖
主要也就是左右小三角比較麻煩一點，實現小三角用的是css3裏的border將其他三個邊的border顏色設爲透明
先用border畫一個小三角吧,把其他三個邊的顏色設爲透明transparent
正方形：.square{
display: inline-block;
background-color: #00d1b2;
border:solid 20px;
border-color:#f00 #F8C301 #0f0 #000 ;
}三角形：.square{
display: inline-block;
border:solid 20px;
border-color: transparent transparent transparent #000;
}
畫出三角形之後就是直接做這個對話框，在一個div裏直接的左右拼一個三角形，先做一個div吧！
.duihu{
margin-top: 10px;
display: inline-block;
padding: 5px;
position:relative;
min-width: 0;
max-width:250px ;
min-height:22px;
line-height: 22px;
background:#F8C301;
color: #555;
border-radius:5px;
}
<div class="duihu">
文件安徽省暗殺計劃的看見愛上打算儘快a
</div>
在左邊拼上一個三角形
.duihu::before{
content: "";
position:absolute;
top:5px;
left:-16px;
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:transparent #F8C301 transparent transparent ;
}
基本這樣也就完成了對話框的基本樣式，爲了分左右還是給div再加一個class：left 和right區分拼到左邊還是右邊
.right{
margin-right: 8px;
float: right;
}
.left{
margin-left: 8px;
}
.right::after{
content: "";
position:absolute;
top:5px;
right:-16px; /* 圓角的位置需要細心調試哦 */
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:transparent transparent transparent #F8C301;
}
.left::before{
content: "";
position:absolute;
top:5px;
left:-16px;
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:transparent #F8C301 transparent transparent ;
}
.clear{
clear: both;
}
<div class="duihu left">
文件安徽省暗殺計劃的看見愛上打算儘快a
</div>
<div class="clear"></div>
<div class="duihu right">
文件安徽省阿加莎按揭公司盎司看見啊
</div>
這樣也就全部文成了，給加一個框讓左右的內容像聊天頁面似的左右展開全部代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.main{
margin: 30px auto;
width: 375px;
height: 750px;
border:solid 1px #eee;
}
.duihu{
margin-left: 20px;
margin-top: 10px;
display: inline-block;
padding: 5px;
position:relative;
min-width: 0;
max-width:250px ;
min-height:22px;
line-height: 22px;
background:#F8C301;
color: #555;
border-radius:5px;
}
.right{
margin-right: 8px;
float: right;
}
.left{
margin-left: 8px;
}
.right::after{
content: "";
position:absolute;
top:5px;
right:-16px;
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:transparent transparent transparent #F8C301;
}
.left::before{
content: "";
position:absolute;
top:5px;
left:-16px;
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:transparent #F8C301 transparent transparent ;
}
.clear{
clear: both;
}
</style>
<body>
<div class="main">
<div class="duihu right">
文件安徽省暗殺計劃的看見愛上打算儘快a
</div>
<div class="clear"></div>
<div class="duihu left">
文件安徽省阿加莎按揭公司盎司看見啊
</div>
<div class="clear"></div>
<div class="duihu left">
文件
</div>
<div class="clear"></div>
<div class="duihu left">
文件123
</div>
<div class="clear"></div>
<div class="duihu right">
文件安徽省暗殺計劃的看見愛上打算儘快按時間打擊卡技術大咖極速代碼，安師大，十大科技收到啊科技時代按時
</div>
</div>
</body>
</html>