<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>
纯css制作仿微信聊天页面
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 后期打算在小程序中添加即时聊天的功能，但是目前这个还没有考虑好以一种什么样的形势去实现，先接入一个腾讯AI提供的免...
- 此作品是本人花心血制作，完全自己的思考，大佬轻喷哈。自己制作过程中搜遍全网没看到有很好的教程，所以花了很多心思。这...
