效果图如下：
主要运用了之前实战项目中的三角形制作和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{
最低0.47元/天 解锁文章
984
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
