一个小三角+一个圆角矩形
话不多说先上效果图：
效果图
我们把这个图形拆分成一个圆角化了的矩形和一个旋转后的矩形，然后背景色正好是圆角矩形的背景色
图形拆分
所以有了清晰的思路，那下面就是代码实现了
完整代码
<!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;//内部元素垂直居中
border: #ccc 1px solid;//外边界的样式
}
.send .arrow {
position: relative;//相对定位
background: #fff;//背景色与外部的圆角矩形背景色一致
width: 10px;//定义合适的宽高
height: 10px;
left: -7px;//调整出舒适的对接位置
font-size: 0;
border-bottom: #ccc solid 1px;//因为三角形的border只需要展示出两条边
border-left: #ccc solid 1px;
box-sizing: border-box;//将盒子设置为border-box这样不会因为加了border而变宽
transform:rotate(45deg);//将小矩形旋转个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>
网友评论