纯HTML+CSS实战之仿微信聊天界面制作

效果图如下：
主要运用了之前实战项目中的三角形制作和before及after伪类选择器知识（其中头像图片采用30px*30px图片）
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯css制作仿微信聊天页面</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-size: 14px;
        }
        .triangle{
            margin: 100px auto ;
            width: 300px;
            background-color: #ebebe9;
        }
        .triangle ul{
            padding: 10px;
        }
        .triangle li{
            padding: 5px;
            margin-bottom: 10px;
        }
        .triangle li span{
            position: relative;
            border-radius: 7px;
            background-color: #a6e860;
            padding: 6px 10px 8px 10px;
            z-index: 1;
        }
        .triangle .textLeft span{
            background-color: white;
        }
        .triangle li.textLeft:before{
            content: url("images/tx1.jpg");
            box-sizing: border-box;
            position: relative;
            left: -10px;
            top: 9px;
        }
        .triangle li.textLeft span:before{
            content: "";
            display: block;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-right: 8px solid white;
            position: absolute;
            top: 8px;
            left: -16px;
        }
        .triangle li.textRight:after{
            content: url("images/tx2.jpg");
            box-sizing: border-box;
            position: relative;
            right: -10px;
            top: 9px;
        }
        .triangle li.textRight span:after{
            content: "";
            display: block;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-left: 8px solid #a6e860;
            position: absolute;
            top: 8px;
            right: -16px;
        }
        li{
            list-style: none;
        }
        .textRight{
            text-align: right;
        }

    </style>
</head>
<body>
<div class="triangle">
    <p>仿微信聊天界面</p>
    <hr>
    <ul>
        <li class="textLeft">
            <span>冯加豪小哥哥在吗~</span>
        </li>
        <li class="textRight">
            <span>在的呢！</span>
        </li>
        <li class="textLeft">
            <span>在干嘛</span>
        </li>
        <li class="textRight">
            <span>在想你^_^</span>
        </li>
        <li class="textLeft">
            <span>讨厌！昨晚把人家弄疼了</span>
        </li>
        <li class="textRight">
            <span>舒服就完事了</span>
        </li>
    </ul>
</div>

</body>
</html>