CSS样式——仿微信语音对话框

一个小三角+一个圆角矩形

话不多说先上效果图：

效果图

我们把这个图形拆分成一个圆角化了的矩形和一个旋转后的矩形，然后背景色正好是圆角矩形的背景色

图形拆分

所以有了清晰的思路，那下面就是代码实现了

完整代码

<!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>

CSS样式——仿微信语音对话框

一个小三角+一个圆角矩形

推荐阅读更多精彩内容