气泡小角的css实现
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head> <title>CSS 箭头Demo</title>
<style type="text/css">
/* 基本样式 */
.tip {
background: #eee;
border: 1px solid #ccc;
padding: 10px;
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
position: relative;
width: 200px;
}
/* 箭头 - :before and :after, 一起组成了气泡小角 */
.tip:before {
position: absolute;
display: inline-block;
border-width: 7px;
border-style: solid;
border-color: transparent rgba(0, 0, 0, 0.2) transparent transparent;
left: -15px;
top: 40%;
content: '';
}
/* 小角的背景填充*/
.tip:after {
position: absolute;
display: inline-block;
border-width: 6px;/*与before的三角形重叠差1px，和元素边框是边框宽度一致*/
border-style: solid;
border-color: transparent #eee transparent transparent;/*边框颜色（小角的填充色）要与整体元素背景一致*/
left: -12px;
top: 40%;
content: '';
}
</style>
</head>
<body>
<div id="contentHolder">
<h2>CSS 伪类(Pseudo-Element)</h2>
<div style="position:relative;">
<div class="tip">
气泡小角的实现效果
气泡小角的实现效果
气泡小角的实现效果
</div>
</div>
</div>
</body>
</html>
执行效果图：
气泡小角的css实现的更多相关文章
- 纯CSS实现带小角的对话框式下拉菜单
最近公司首页样式重写,头部下拉菜单改为了带小角的对话框式下拉菜单: 很多人可能会用图片,事实上纯CSS就能够实现: HTML: <!DOCTYPE html> <html lang= ...
- 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果
去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...
- WPF 气泡尖角在左边、下面、右边、上面
由于项目需要,在弄一个气泡提示框,根据网上资料,使用Path可以将气泡画出来,下面是我画出来的. 1.气泡尖角在左边的: <Path Stroke="Black" Strok ...
- [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...
- 小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]
小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 ...
- 前端小技巧：css sprite----V客学院技术分享
前端小技巧:css sprite 因为英文名叫sprite,翻译过来是精灵,而雪碧饮料也叫sprite,所以叫精灵兔或者雪碧图. 它有什么作用呢? 当用户在浏览器里输入一个URL地址的时候,你会感觉无 ...
- CSS Icon 项目地址 小图标-用css写成的
http://cssicon.space/#/icon/focus 这是所有用css写成的 小图标 右侧有 html和css代码
- 小tip:纯CSS让overflow:auto页面滚动条出现时不跳动
本文转载于张鑫旭博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水 ...
- 贴心小技能——纯CSS实现的帮助提示
1. 新技能传授---哒哒哒哒 我们经常会接到这样的小需求,鼠标放在某个位置实现一段小提示. 你还在用js实现这样一个小功能,你就太out了,来看看我们用纯CSS打造的帮助提示. 2. html &l ...
随机推荐
- hdu6314（ 2018 Multi-University Training Contest 2）
bryce1010模板 http://acm.hdu.edu.cn/showproblem.php?pid=6314 ----. 又是一个数学题! 这个题使用容斥原理解决的,现场看dls推公式. 我也 ...
- MFC 创建UI线程
对于windows来说,所有的线程都是一样的,但MFC却把线程区分为两种:用户界面(UI)线程和工作者线程.用户界面线程具有消息循环而工作者线程没有.UI线程可以创建窗口并给这些窗口发送消息,工作者线 ...
- python入门之集合set
集合(无序不重复) 创建 s = {} s = set() 转换 s = set(li) 方法 s.add("chy") #添加元素 s.clear() #清除元素 a = s.d ...
- ps 进程管理
一. 进程管理 1. pstree 2. ps 3. top 4. nice 5. free 6. screen 二. 程序与进程 程序是静态的文件,进程是动态运行的程序. 三. 进程和线程 一个程序 ...
- Vue实例的4个常用选项
1.过滤器 filters:在不改变的data的情况下输出前端页面需要的格式数据.例如将小数过滤为整数等.filters是一个对象,里边定义一个function方法,function传入一个参数,fu ...
- AndroidStudio进行Build时出现DexArchiveMergerException异常的解决办法
今天在AndroidStudio中导入了一个项目,编译的时候没有什么问题,但是在执行Rebuild Project 和 Build APK(s)时报错了,提示: Error:Execution fai ...
- android布局带参返回
package com.lxj.lesson2_3ID19; import com.example.lesson2_3_id19.R; import com.lxj.other.AgeActivity ...
- CSS布局之-强大的负边距
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...
- Java jar包查询下载方法
做过java开发的工程师,对java应用所需jar包一定不会陌生.特别是有需要搭建开发环境时,对各种jar包的需求量就会很大. 如何快速的找到自己想要的jar包,是蛮多java工程师所面临的一个难题. ...
- Python3实现自动备份
需求 将重要文件备份到指定目录,存档文件名称为“当前日期.zip”. 前提 1) Windows系统 2) Python 3以上版本 旗舰版 #!usr/bin/python # -*- coding ...