css 文本气泡样式
2024-10-14 13:07:05
1、简易气泡
eg:
html部分:
<div class="bubble">我是气泡文本</div>
css部分:
//小三角
.bubble:before{
position: absolute;
top: 80px;
left: 30px;
content: '';
border: 15px solid transparent;
border-top-color: cadetblue;
}
.bubble{
position: relative;
height: 80px;
width: 200px;
border: 2px solid cadetblue;
}
页面效果:
2、复杂气泡
简述:两个小三角的叠用,用与背景色相同的小三角挡住另一小三角的横线部分。如图:
html部分:
<div class="wrap">
<span></span>
<span></span>
<div class="bub">我是气泡文本</div>
</div>
css部分:
.wrap span:first-child{
position: absolute;
bottom:-30px;
left: 20px;
border: 15px solid transparent;
border-top-color: cadetblue;
}
.wrap span:nth-child(2){
position: absolute;
bottom:-26px;
left: 20px;
border: 15px solid transparent;
border-top-color: #ffffff;
}
.bub{
position: relative;
height: 80px;
width: 200px;
border: 2px solid cadetblue;
z-index: -1;
}
页面效果:
最新文章
- 窥探Swift之别具一格的Struct和Class
- linuxmint 17安装scim输入法
- WIN7 OEM Nin1 地址
- java变量作用域
- MVC4 数据验证、特性、自动属性总结
- LA 3695 Distant Galaxy
- Java-Android 之动画的实现
- oracle 32位和64位的问题
- android应用开发--------------看RadioGroup源代码,写相似单选选项卡的集成控件(如底部导航,tab等等)
- Use View.isInEditMode() in your custom views to skip code when shown in Eclipse
- MySQL5.7绿色版(免装版)的初始化和修改密码
- 移动端的一些常用meta标签
- ASP.NET Core下发布网站
- SpringBoot配置activemq消息队列
- Django 2.0 与 Django1.0在内部方法上的差异
- ELK原理与介绍
- spring boot2 集成Redis
- NIO学习笔记七:Pipe
- 从0x7fffffff+1开始的数学期望
- C++的函数重载和main函数之外的工作