<!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实现的更多相关文章

  1. 纯CSS实现带小角的对话框式下拉菜单

    最近公司首页样式重写,头部下拉菜单改为了带小角的对话框式下拉菜单: 很多人可能会用图片,事实上纯CSS就能够实现: HTML: <!DOCTYPE html> <html lang= ...

  2. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

  3. WPF 气泡尖角在左边、下面、右边、上面

    由于项目需要,在弄一个气泡提示框,根据网上资料,使用Path可以将气泡画出来,下面是我画出来的. 1.气泡尖角在左边的: <Path Stroke="Black" Strok ...

  4. [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

  5. 小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]

        小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 ...

  6. 前端小技巧：css sprite----V客学院技术分享

    前端小技巧:css sprite 因为英文名叫sprite,翻译过来是精灵,而雪碧饮料也叫sprite,所以叫精灵兔或者雪碧图. 它有什么作用呢? 当用户在浏览器里输入一个URL地址的时候,你会感觉无 ...

  7. CSS Icon 项目地址 小图标-用css写成的

    http://cssicon.space/#/icon/focus 这是所有用css写成的  小图标  右侧有 html和css代码

  8. 小tip:纯CSS让overflow:auto页面滚动条出现时不跳动

    本文转载于张鑫旭博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水 ...

  9. 贴心小技能——纯CSS实现的帮助提示

    1. 新技能传授---哒哒哒哒 我们经常会接到这样的小需求,鼠标放在某个位置实现一段小提示. 你还在用js实现这样一个小功能,你就太out了,来看看我们用纯CSS打造的帮助提示. 2. html &l ...

随机推荐

  1. SRE思想

    1 规模效应 业务越庞大,服务器就越多,服务越多,就越需要拆分成分布式架构.架构越复杂,对运维的能力要求就越高.出错的概率就越大,运维的工作量就越大.因此就要更多开发提升效率的工具. 而在小企业,业务 ...

  2. 17 文件和网络I/O

    1       文件和网络I/O 1.1  文件处理 groovy向java所提供的File 类,新增了几个方便的方法.分别是:eachLine和.text. package file class F ...

  3. LessCss学习笔记

    一.入门 1.LESSCSS是什么? LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量.继承.运算.函数等,更方便CSS的编 ...

  4. VS中以插件开发的思想开发Winform应用

    简单定义: 插件(也称构件)式开发:主要内容就是一个宿主程序加上后期开发的若干插件程序构成整个系统! 宿主程序提供接口注册,插件注册实现接口,从而使不同的插件提供新的功能: 举例: 以下是用VS中的W ...

  5. hihocoder1860 最大异或和

    思路: 把N个前缀异或和插入一棵trie树中,然后对每个前缀异或和x计算能使x ^ y最大的前缀异或和y.利用了异或运算的a ^ b ^ a = b的性质. 参考了https://cloud.tenc ...

  6. Android 两个ArrayList找出相同元素及单个ArrayList删除元素

    //从一个ArrayList中删除重复元素 List<String> arrayList1 = new ArrayList<String>(); arrayList1.add( ...

  7. 使用 Visual Studio 2017 部署 Azure 应用服务的 Web 应用

    本快速入门介绍了如何使用 Visual Studio 2017 创建并部署 Azure Web 应用.在本教程中完成的所有操作均符合1元试用条件. 本快速入门介绍了如何使用 Visual Studio ...

  8. HTML iframe框架

    iframe 作用: 就是在一个网页插入一个小窗口   窗口里面也是一个网页 <a href="http://www.baidu.com" target="da1& ...

  9. Software Engineer（百赴美）

    http://talent.baidu.com/component1000/corp/baidu/html/BFM.html http://talent.baidu.com/baidu/web/tem ...

  10. Higher level thinking

    「Higher level thinking」-- 出自 Ray Dalio 的<Principles>(PDF 原文:Principles by Ray Dalio) Higher le ...