css小三角气泡效果,纯CSS实现聊天框小尖角、气泡效果
那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码:
复制代码代码如下:
.arrow {
width:0;
height:0;
font-size:0;
border:solid 10px #000;
}
这儿,我们可以得到一个黑色的正方形,其实这是边框组成的,因为div的宽度和高度都是0,。那么,我们具体来看看,div宽度和高度都是0时,它的上下左右四边框都是怎样的,下面我们把边框的各边颜色分别设置为不同颜色:
复制代码代码如下:
.arrow {
width:0;
height:0;
font-size:0;
border:solid 10px;
border-color:#f00 #0f0 #00f #000;
}
我们发现,原来当div的宽度和高度都是0的时候,它的整个边框是由四个三角形组成的,每一边为一个三角形,那么我们就可以利用这个特点,来做可爱的小尖角了。我们只要把不需要的三边的边框(三角形)的颜色设置为与背景相同即可,这样就只能看到你想要的那个三角形了,然后再利用定位调整一下位置就可以了。具体代码如下所示:
复制代码代码如下:
body {
background:#4D4948;
}
.send {
position:relative;
width:150px;
height:35px;
background:#F8C301;
border-radius:5px; /* 圆角 */
margin:30px auto 0;
}
.send .arrow {
position:absolute;
top:5px;
right:-16px; /* 圆角的位置需要细心调试哦 */
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:#4D4948 #4D4948 #4D4948 #F8C301;
}
大功告成,效果如下图:
css小三角气泡效果,纯CSS实现聊天框小尖角、气泡效果相关推荐
- 纯CSS实现聊天框小尖角、气泡效果
经常看到这样的尖角,以前不懂,以为都是用图片做出来的,后来惊奇的发现,原来很多都是用CSS做出来的,既美观又节省资源,真是两全其美啊! 那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码: & ...
- css如何使文字抖动,纯CSS文字彩色抖动抖音效果
效果 纯CSS文字彩色抖动抖音效果 简介 直接将这下面段放进你的 style.css doudong{ animation: uk-text-shadow-glitch .65s cubic-bezi ...
- css中间镂空,怎么用纯CSS实现镂空效果
怎么用纯CSS实现镂空效果 发布时间:2021-03-19 09:49:16 来源:亿速云 阅读:99 作者:小新 小编给大家分享一下怎么用纯CSS实现镂空效果,希望大家阅读完这篇文章之后都有所收获, ...
- html如何实现立体效果,纯css实现立体摆放图片效果的示例代码
1.元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举个栗 ...
- html如何实现立体效果,纯css实现立体摆放图片效果的实例代码
1. 元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
- HTML中 css红绿黄灯,纯CSS实现红绿灯效果(面试常见)
先看题,别看答案试下吧 ~_~ 1.下面的代码输出的内容是什么? function O(name){ this.name=name||'world'; } O.prototype.hello=func ...
- css玻璃雨滴效果,纯css实现窗户玻璃雨滴逼真效果_javascript技巧
写样式,毕竟每个雨滴都长得不一致嘛.使用预处理器除了可以帮助我们减少工作量之外,还可以使用预处理器中的循环.变量等.最主要的是可以使用随机函数产生的随机值,让我们不需要单独处理上百个雨滴. 有关于HA ...
- 如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果?
纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
- php实现动态按钮效果,纯css实现MaterialDesign水滴动画按钮效果的js实现方法
本篇文章给大家带来的内容是关于纯css实现Material Design水滴动画按钮效果的js实现方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在上一篇,我们已经实现了用纯cs ...
最新文章
- html style属性
- Hadoop学习笔记之三 数据流向
- 高通CVPR神研究:视频处理计算量降低78%,教卷积层自己“挑像素”,卡成PPT的视频纵享丝滑...
- 手把手教你学51单片机-c语言版期末考试,手把手从零教你学51单片机
- java性能调优工具--笔记
- GeneralUpdate实现应用程序更新
- java虚拟机源码怎么看_java虚拟机JVM第4讲:从源代码到机器码,发生了什么?
- python端口扫描工具_Python实现的多线程端口扫描工具分享
- T-SQL 常用日期格式
- parallels desktop 启动过失败_使用u启动软件制作启动盘时注意哪些【详细介绍】...
- hibernate 乐观锁与悲观锁使用
- 冲刺阶段(二) 第六天
- 到底是大数据还是“拍脑门”?
- 关于java.lang.ClassNotFoundException
- 群晖NAS从入门到精通的所有帖子汇总,只要这一篇就够了
- 云服务器带外管理-从IPMI到RedFish
- 保研计算机专硕还是学硕,考研怎么选报专硕还是学硕
- Create user中采用externally操作系统认证方式详解
- kafka第二次课!!!
- 维修服务器请示,更换云服务器的请示
热门文章
- 使用SQL2008建立数据库,并在网页上实现对数据库的访问
- 拼多多前端笔试题(一)
- Jmeter 并发测试下让登录接口只执行一次
- 对oracle的心得体会,学习心得征文活动精选一:Oracle学习的心得体会
- Gps的GPRMC数据格式详解及要注意的地方
- SpringBoot2整合富文本编辑器wangEditor(含文件上传)攻略
- 打造DIY版Echo:树莓派+ Alexa 语音服务
- Log4j配置文件例子
- Linux磁盘扩容【2T内(fdisk工具/MBR磁盘分区)】
- vue项目打包后部署到服务器(超详细步骤)