利用伪类编写小三角和模仿微信对话框

直接上代码：

1.编写小三角

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.demo:after{content: '';display: inline-block;width: 0;height: 0;border: 8px solid transparent;border-top: 8px solid #AFABAB;position: relative;top: 2px;left: 10px;
}
</style>
</head><body>
<div class="demo">这是一个测试</div>
</body>
</html>

效果如下：

2.编写微信对话框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.left,.right{min-height: 40px;position: relative;display: table;text-align: center;border-radius: 5px;background-color: #9EEA6A;
}
.right{      /*使左右的对话框分开*/top: 40px;left: 60px;
}
.left > p,.right > p{    /*使内容居中*/display: table-cell;vertical-align: middle;padding: 0 10px;
}
.left:before,.right:after{   /*用伪类写出小三角形*/content: '';display: block;width: 0;height: 0;border: 8px solid transparent;position: absolute;top: 11px;
}
/*分别给左右两边的小三角形定位*/
.left:before{    border-right: 8px solid #9EEA6A;left: -16px;
}
.right:after{    border-left: 8px solid #9EEA6A;right: -16px;
}
</style>
</head><body>
<div class="left"><p>肥英美吗？</p>
</div>
<div class="right"><p>计科最美</p>
</div>
</body>
</html>

效果如下：

利用伪类编写小三角和模仿微信对话框相关推荐

css3 伪类写小三角,详解css如何利用 :before :after 写小三角形
之前写的三角形一直在同一个颜色,没有边框的样式.如下: CSS代码如下: .tri-up{width: 0;height:0;border-left:20px solid transparent;bo ...
python写小程序后端-微信小程序后端用Flask实现
手上有个微信小程序项目,因为对Python相对熟悉一些,打算后端用python写,具体采用python 轻量级的flask框架. 在做的过程中,有些问题需要考虑,记录在下边. 1. 开发的小程序后端怎 ...
C++ 复数类编写小练习
1 创建复数类.然后重载流操作运算符,能够执行输入输出(10分) 题目内容: 1. 关于复数: 复数x被定义为二元有序实数对(a,b),记为z=a+bi,这里a和b是实数,i是虚数单位.在复数a+bi ...
微信小程序模仿微信主页及页面跳转详解
主页wxml代码: < ...
【Unity3D】利用Touch类编写手游触控操作演示
目录 1.效果展示 2.博客介绍 3.具体思路和写法 (1)Touch类介绍 (2)编写Touch管理类 (3)修改摇杆控制 4.资源下载 5.推送 6.结语 1.效果展示 2.博客介绍手游开发和端 ...
小程序模仿微信聊天界面
首先,这个消息聊天框的设计要考虑到: 消息的发出者,接收者消息的状态:已发(用数组保存起来):未发(输入值并获取) 手机端键盘弹起的高度对界面内容的展示的影响第一个问题消息的发出者,接收者 ...
微信小程序-模仿绘制聊天界面
参考文章 1.小程序模仿微信聊天界面 2.微信小程序实现仿微信聊天界面(各种细节处理) 3.微信小程序之页面中关于聊天框三角形的制作和使用 4.仿微信聊天记录时间显示 5.微信小程序-同时获取麦克风. ...
js模仿微信语音播放的小功能
自己写的一个模仿微信语音播放的小功能,实现的主要功能是:点击播放,点击暂停,播放切换,,, 代码如下: <!DOCTYPE html> <html lang="en&qu ...
android 模仿微信读书,Flutter 模仿微信读书实现案例
前言: 各位同学大家好,有一段时间没有给大家更新博客了,最近使用flutter跨平台写了一个模仿微信读书app demo版本(模仿其中部分经典页面不是全部)觉得有几个点值得分享一下,趁着今天放假,就发 ...

利用伪类编写小三角和模仿微信对话框

利用伪类编写小三角和模仿微信对话框相关推荐

最新文章

热门文章