一個(gè)小三角+一個(gè)圓角矩形
話不多說先上效果圖：
效果圖
我們把這個(gè)圖形拆分成一個(gè)圓角化了的矩形和一個(gè)旋轉(zhuǎn)后的矩形，然后背景色正好是圓角矩形的背景色
圖形拆分
所以有了清晰的思路，那下面就是代碼實(shí)現(xiàn)了
完整代碼
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>微信對話框樣式</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
background: #eee;
}
.send {
left: 500px;
position: relative;
width: 300px;
height: 70px;
background: #ffffff;
border-radius: 5px;//外部矩形給圓角
display: flex;//布局選用flex布局
align-items: center;//內(nèi)部元素垂直居中
border: #ccc 1px solid;//外邊界的樣式
}
.send .arrow {
position: relative;//相對定位
background: #fff;//背景色與外部的圓角矩形背景色一致
width: 10px;//定義合適的寬高
height: 10px;
left: -7px;//調(diào)整出舒適的對接位置
font-size: 0;
border-bottom: #ccc solid 1px;//因?yàn)槿切蔚腷order只需要展示出兩條邊
border-left: #ccc solid 1px;
box-sizing: border-box;//將盒子設(shè)置為border-box這樣不會因?yàn)榧恿薭order而變寬
transform:rotate(45deg);//將小矩形旋轉(zhuǎn)個(gè)45度從而做出三角形的突出角
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
-o-transform:rotate(45deg); /* Opera */
}
</style>
</head>
<body>
<div class="send">
<div class="arrow"></div>
</div>
</body>
</html>
