当前位置: 开发笔记 > 编程语言 > 正文

如何利用CSS画一个聊天消息对话框？

作者：维尼饭爱nichkhun_774 | 来源：互联网 | 2023-09-18 18:35

要画一个对话框，首先来学习做一个三角形。

要画一个对话框&＃xff0c;首先来学习做一个三角形。

上面的代码运行效果如下&＃xff1a;

已经知道border的构成原理&＃xff0c;然后只需改一行代码&＃xff1a;

// 四个参数对应 &＃xff1a;上右下左 border-color: transparent transparent #ccc transparent;

于是就只剩下面的三角形部分啦&＃xff01;

现在来利用三角形技术做对话框&＃xff1a;

这是一个对话框鸭&＃xff01;

最终的效果如下&＃xff1a;

推荐阅读

ip
如何在HTML中获取鼠标的当前位置

本文介绍了在HTML中获取鼠标当前位置的三种方法，分别是相对于屏幕的位置、相对于窗口的位置以及考虑了页面滚动因素的位置。通过这些方法可以准确获取鼠标的坐标信息。 ... [详细]

蜡笔小新 2023-12-11 13:04:00
ip
移动端常用单位——rem的使用方法和注意事项

本文介绍了移动端常用的单位rem的使用方法和注意事项，包括px、%、em、vw、vh等其他常用单位的比较。同时还介绍了如何通过JS获取视口宽度并动态调整rem的值，以适应不同设备的屏幕大小。此外，还提到了rem目前在移动端的主流地位。 ... [详细]

蜡笔小新 2023-12-12 07:20:50
ip
Nginx使用（server参数配置）

本文介绍了Nginx的使用，重点讲解了server参数配置，包括端口号、主机名、根目录等内容。同时，还介绍了Nginx的反向代理功能。 ... [详细]

蜡笔小新 2023-12-14 17:08:34
ip
kotlin动画实现上下移动、放大缩小、旋转功能

本文介绍了使用kotlin实现动画效果的方法，包括上下移动、放大缩小、旋转等功能。通过代码示例演示了如何使用ObjectAnimator和AnimatorSet来实现动画效果，并提供了实现抖动效果的代码。同时还介绍了如何使用translationY和translationX来实现上下和左右移动的效果。最后还提供了一个anim_small.xml文件的代码示例，可以用来实现放大缩小的效果。 ... [详细]

蜡笔小新 2023-12-14 17:29:08
char
页面请求方法参数最长_关于 HTTP GET/POST 请求参数长度最大值的一个理解误区

http:my.oschina.netleejun2005blog136820刚看到群里又有同学在说HTTP协议下的Get请求参数长度是有大小限制的，最大不能超过XX ... [详细]

蜡笔小新 2023-12-13 19:20:03
char
《数据结构》学习笔记3——串匹配算法性能评估

本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]

蜡笔小新 2023-12-13 16:16:05
char
自动轮播，反转播放的ViewPagerAdapter的使用方法和效果展示

本文介绍了如何使用自动轮播、反转播放的ViewPagerAdapter，并展示了其效果。该ViewPagerAdapter支持无限循环、触摸暂停、切换缩放等功能。同时提供了使用GIF.gif的示例和github地址。通过LoopFragmentPagerAdapter类的getActualCount、getActualItem和getActualPagerTitle方法可以实现自定义的循环效果和标题展示。 ... [详细]

蜡笔小新 2023-12-13 14:41:31
char
南邮ctf-web的writeup

本文介绍了南邮ctf-web的writeup，包括签到题和md5 collision。在CTF比赛和渗透测试中，可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型，可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]

蜡笔小新 2023-12-13 10:58:55
import
Android开发实现的计时器功能示例

本文分享了Android开发实现的计时器功能示例，包括效果图、布局和按钮的使用。通过使用Chronometer控件，可以实现计时器功能。该示例适用于Android平台，供开发者参考。 ... [详细]

蜡笔小新 2023-12-12 22:51:19
import
在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板

本文介绍了在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板的方法和步骤，包括将ResourceDictionary添加到页面中以及在ResourceDictionary中实现模板的构建。通过本文的阅读，读者可以了解到在Xamarin XAML语言中构建控件模板的具体操作步骤和语法形式。 ... [详细]

蜡笔小新 2023-12-12 17:52:50
ip
django视图函数的使用方法

本文介绍了django中视图函数的使用方法，包括如何接收Web请求并返回Web响应，以及如何处理GET请求和POST请求。同时还介绍了urls.py和views.py文件的配置方式。 ... [详细]

蜡笔小新 2023-12-12 16:02:59
ip
SpringMVC接收请求参数的方式总结

本文总结了在SpringMVC开发中处理控制器参数的各种方式，包括处理使用@RequestParam注解的参数、MultipartFile类型参数和Simple类型参数的RequestParamMethodArgumentResolver，处理@RequestBody注解的参数的RequestResponseBodyMethodProcessor，以及PathVariableMapMethodArgumentResol等子类。 ... [详细]

蜡笔小新 2023-12-11 19:55:40
ip
android listview OnItemClickListener失效原因

最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]

蜡笔小新 2023-12-14 14:25:50
import
延迟注入工具（python）的SQL脚本

本文介绍了一个延迟注入工具（python）的SQL脚本，包括使用urllib2、time、socket、threading、requests等模块实现延迟注入的方法。该工具可以通过构造特定的URL来进行注入测试，并通过延迟时间来判断注入是否成功。 ... [详细]

蜡笔小新 2023-12-12 10:36:42
ip
基于Socket的多个客户端之间的聊天功能实现方法

本文介绍了基于Socket的多个客户端之间实现聊天功能的方法，包括服务器端的实现和客户端的实现。服务器端通过每个用户的输出流向特定用户发送消息，而客户端通过输入流接收消息。同时，还介绍了相关的实体类和Socket的基本概念。 ... [详细]

蜡笔小新 2023-12-11 15:55:40

维尼饭爱nichkhun_774

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章