实现自定义的手型气泡提示

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style type="text/css">  

    .test{

      	background: #CE5010 none repeat scroll 0% 0%;

				position: relative;

				border-radius: 20px;

				margin: 60px;

				height: 2em;

				text-align: center;

				float: left;

				color: white;

				padding-left: 10px;

				padding-right: 10px;

				padding-top: 5px;

				font-size: 12px;

    }  

    .test span.bot{

    		width: 0;

        height: 0;

        font-size: 0;

        overflow: hidden;

        position: absolute;

       border-style: solid;

			left: 0px;

			border-color: transparent transparent transparent rgb(206, 80, 16);

			top: 18px;

			border-width: 12px;

    }  

    </style>

</head>  

<body>

    <div class="test">

        <span class="bot"></span>

        CSS"边框法"实现气泡对话框效果，需要两个辅助span

    </div>  

</body>  ""

<html>

　　

实现效果如下：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAa8AAAB8CAIAAABR1KhjAAAKfklEQVR4nO3dz4/cZh3H8f4Jq7ZKLuEKp8IJoV6ItOoZbdPkEISgRGo4MFSjCOUG6hGqSHOYE+ICCCGVzj9ghBC5+TQTRJim6shJGiOTqI2pIAwbtv1yeOzHzy/bs5tNHmfn/dL3kIxmxvYzz/Px89hu+oIAAEReiL0DADAIpCEAiJCGAKCQhgAgQhoCgEIaAoAIaQgACmkIACKkIQAopCEAiJCGAKCQhgAgQhoCgEIaAoAIaQgACmkIACKkIQAopCEAiJCGAKCQhgAgQhoCgEIaAoAIaQgACmkIACKkIQAopCEAiJCGAKCQhgAgQhoCgEIaAoAIaQgACmkIACKkIQAopCEAiJCGAKCQhgAgQhoCgEIaAoDIYNPw4N//fHj997evXfrw6ms333rlxoXT870diqKOXDcunL751isfXn3t9rVLD6+/f/Dos9ijfHAGl4b79+/emVxenD8VvfdQ1AmuxflTdyaX9x98HHvED8iA0vCLg8f5r366YBpIUc+qFhdO//0373xx8Dj26B+EoaTh/oN7t66cjd45KGoL69aVs/sP7sXOgPgGkYaPy/s3L381ep+gqK2tmz/42v/K+7GTILL4afj5+tEHV74ZvTdQ1JbXrStnP//vf2LnQUzx0/DeL34cvR9QFDXf27n3y6ux8yCmyGm4vrtcnHspeiegKGq+t7M499L67gdxMyGiyGmY/ew7z+7HniSSjoxXdot8VYz9d47KfLpU7/elo/kkEUky6yNtXxWs8JuztNnIOk3WznbVLtUHsp7ttn//qJT6+8fTtfnBDWo5W5WT6rNlYCu7Ra52SB9CX3M5Xxv6q3qlrZN0Hqx/7B2SrG0/7c2Zv0WY16rL2crrFfqXtX/u8XSdTotcnBbo+sgzrOzn3+07+BMrZho+Lu/PX3/xEP27ybLmRaNL+S/uFrmUsyYRstR8/26RB7tvM7zbx6GRONVXOd3X3bRVk8QfTtam3RSrX6+/uY1x4KtivBMa1UnmRo/VCGZOVc01nprR7I3hTZrLPwR3tC9nK/3xtj8funp2SXeAUdkSZOZudyXUeLqWpJit7NOtf+D1m9ORsXXrB1XNGzEN56+/uLW3U2Km4Sd/+HVvbxZz+FWde1Raw153aP/FnSx1ImlU5tNleHaQZE6/TJP1bOREj50F4ZlI3aGNTffNR+qvddOwHhXGiKrG0tGywB/2ozKfZv68rNrcbpGaI9k5f2zUXF4ir4qJFa8qQY5nbrhRO3edTuoD32COaUVhFV5Zau6tvaF85c73q801rapPRTHTcG/nkz/+trsZT6qYaZi9+73OX8UMOLvz+ROrliVhlq6KSdtq0Rzbxp/HTYTpnm32TrvH64+73dfatPoqY9g405+N03C3yFfFLDzmdQpLOnImdFJlijeP87LVW8O2Z4czjW1prvnezny8q3Z+OTb20Dze45obOicA+6/1oZmTMmduqPfH+CGqXfU/VfcWcRYcEtqo3VfdKzbmj+gEcYRYzN598wmG9XMsZhr2PFjTsZwMrteC0en3OXO57cwZ6+4rIpJPl+3De+muifquGzZfVY0Wc5CoP5uTIz2pdNPQvfTZ3XTGAepptbPu0zFtHL45gbKTKHBtYYPmqn+a8ajMV8Vkuk4TL2uO67qh8UNLkk2M6epmlxqkNQ11YlpTOT1PNFM7S+3vqVomsF07nQNzQ/0Ho32a9bUZnU3nN06EzVlWmpNob3v+7Ydfb2+gkyxmGv71zS8fKQ31gsgemcEX/Q/qNLGSxZwUrNaqB+crFVvGLltf3nqtve1aoXGeD0wZnEForaGq17M0KdpSo/uKlZd6aniX9YVUPZitHXPX2n4a9jaX8xF9IKti3Drve6JrhYco5+JvoOmWs1X1qzXz+uqIjBluaJ/VrTbVgE0aJtlek7DOiUepX9Hb0lv3b9wZHbK5s2dc3GheHJW6hxgLlLa6cfHMEYf0cy5mGvb80wwdaVj3PxE3BYIvWt/ZLHzs02nd+8tJ4LaAu/Sz52jeVLGtmmVUy4UhJw1HpYg7ywuWs/iq/mqtubw0NEdLM/CCaRiYuB2mueprC9YkaD0b6Ql1x8SwsnHz9siTsv89usHVDo/KfFqk1USsnIRvvgUT3DqudLrx3DC4lhdxb9y5K3RztVFvQX9cf7b/+YfFGy/3tdHJFHVu+P2vdHbujlO3+Z7DrJrrFHNO7M3rMyN6OlfK9r3s+tGNlkG78Wi303CSrNNko0dk7DSsR6aXoX6Iew3VlobWUNeXNTdrrnk9j3YfAAg0126Rr8p0tU6T0PM9h6q2ZwYCTeFNvswVrnlVelTmSblxGtrN2DE3dNLQvEzs37bS08ZQGo6na70Wbg7qcGn4l29/6WmP/WGKmYa9/0xDs04xe5U18uufOfhiyxgwotB/es7oi5NkPZs69xadOY7btyZJ57VLMxpa5oZqM+o2SD5d6nHYcytZ7bO1DrWW/6IP0whcSTLvLrOXhqMqnkJpuFlz6Z9SrMsU4lxSaIa6SpZgWJttGEyfrkcFzUuHs6Te1SSzL2LUB7Vat0bSodNQJDwt1WloXABZFTPzKnMVoIX50JheX1tXXetTsnUF/ChpuPzRNzYYvifQkO8pGz1JCV1xD60OWoZQfXW5L7D6HqAzgql+gNFco3VduFRj1bqmbnyV6PjQa9hN07B+vLFaILc/RlfNiYzhEb7x2jS+dzVQRMxk6X/eUJ9+VITpk5y+2+CcHtw7EuLPIluHdH0m0G9oe4TT7TPizw1bm3rDNGx6Rcfc0Prd3ae4m1+wSXnzUk+aeDtvbDRNjjY35J5yBJ/+6Xf9aXh8Zdyna9khZ7kafHgtn2Y6L5o3GN0r9J9w6C0Ggth5ptJdxTeduyfE6+Qy14ChFXoVQ4HHPqo3NENdJ2PbSnmD5kpK74kTc0ro/LU9WZxqTatgGhZmpBr7aW9FX6Vt+X79wdCmD7lSnhprXrPq3Z703v91VsrHWZ/++b2WEXLCxUzDp/FDUtR21NNKw8UbLx/862HEWIiINKSo57GeVhry3ynHEbs/URRl1eLC6f1/3ImYCXGRhhRFVcW/bxhN9N+eoihdH/3kW1v+v4siDSmK4v+LIkIaUhT10TvntvY+sok0pKjtLf5/yqaBpmHPP+hAUdST1eL8qTuTy/sPPo6YAEMz0DRUdfvapeXbr964eCZ616GoE1A3Lp5Zvv3q7WuXHl5//+DRZxHH/jANOg3nezsRdw/AViENAUBk4GkYcd8AbJuBpmHEvQKwnUhDABAZZhpG3CUAW2tYaRhxZwBsOdIQAEQGlYYR9wQABpGGEfcBABTSEABEhpCGEXcAALSYaQgAw0EaAoAIaQgACmkIACKkIQAopCEAiJCGAKCQhgAgQhoCgEIaAoAIaQgACmkIACKkIQAopCEAiJCGAKCQhgAgQhoCgEIaAoAIaQgACmkIACKkIQAopCEAiJCGAKCQhgAgQhoCgEIaAoAIaQgACmkIACKkIQAopCEAiJCGAKCQhgAgQhoCgEIaAoAIaQgACmkIACKkIQAopCEAiJCGAKCQhgAgQhoCgEIaAoAIaQgACmkIACIi/wff29C53k71DgAAAABJRU5ErkJggg==" alt="" />

CSS实现自定义手型气泡提示的更多相关文章

  1. CSS鼠标效果手型效果

    Example:CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a> Exam ...

  2. 气泡提示 纯CSS

    tooltip(气泡提示) 依赖 脚本文件:CalvinTip.js 样式文件:toolTip.css 参数 elems HTMLNode 必须 气泡提示的元素 options Object 可选 多 ...

  3. vue 指令---气泡提示(手撸实战)

    菜鸟学习之路//L6zt github 自己在造组件轮子,也就是瞎搞.自己写了个slider组件,想加个气泡提示.为了复用和省事特此写了个指令来解决.预览地址项目地址 github 我叫给它胡博 cs ...

  4. CSS样式--移动划过超链接鼠标变手型详解

    用css控制鼠标样式的语法如下:<span style="cursor:*">文本或其它页面元素</span>把 * 换成如下15个效果的一种: 下面是对这 ...

  5. css实现气泡提示框三角及css中drop-shadow的使用

    css 做一个弹出气泡,样式怎么设计? 难点: 要实现白色三角型,可以在伪元素before和after上设置一个黑.一个白三角形,白三角形会挡住黑的,从而实现. &::before, & ...

  6. Tippy.js - 免费开源且高度可定制的气泡提示独立组件

    推荐一个非常优秀的 web 气泡提示独立UI组件. 介绍 Tippy.js 是一款用于Web的完整工具提示,弹出菜单,下拉菜单和菜单解决方案.适用于鼠标,键盘和触摸输入. 特点 超轻量的纯 javas ...

  7. 【C#】组件发布：MessageTip，轻快型消息提示窗

    -------------201610212046更新------------- 更新至2.0版,基本完全重写,重点: 改为基于原生LayeredWindow窗体和UpdateLayeredWindo ...

  8. Notepad++ 配置 支持jquery、html、css、javascript、php代码提示

    原文:Notepad++ 配置 支持jquery.html.css.javascript.php代码提示 官网下载:http://notepad-plus-plus.org/ 获取插件的方法:打开软件 ...

  9. jquery.validate.unobtrusive.js实现气泡提示mvc错误

    改写jquery.validate.unobtrusive.js实现气泡提示mvc错误 个人对于这个js.css不是很擅长,所以这个气泡提醒的样式网上找了下,用了这个http://www.cnblog ...

随机推荐

  1. js中对象使用

    简单记录javascript中对象的使用 一.创建对象 //创建一个空对象 var o={}; //创建一个含有两个属性的对象,x.y var o2={x:12,y:'12',name:'JS'}; ...

  2. prototype和__proto__

    一.prototype和__proto__的概念 prototype是函数的一个属性(每个函数都有一个prototype属性),这个属性是一个指针,指向一个对象.它是显示修改对象的原型的属性. __p ...

  3. jQuery cxDialog 对话框

    cxDialog 是基于 jQuery 的对话框插件,支持自定义外观样式,同时兼容 Zepto,方便在移动端使用. 版本: jQuery v1.7+ | Zepto v1.0+ jQuery cxDi ...

  4. 如何让C#像JavaScript一样编程

    JavaScript是一门动态语言,可以动态的给对象添加属性和方法,非常方便.那么有没有一种方式可以让C#也具备动态添加属性和方法的能力,像Javascript一样进行编程? 下面就介绍一个很不错的框 ...

  5. Horseman - 让你更轻松的使用 PhantomJS

    Horseman 是一个 Node.js 模块,让你可以更轻松的使用 PhantomJS 进行功能测试,页面自动机,网络监控,屏幕捕获等.它提供了直接,链式的 API,易于理解的控制流,避免回调陷阱. ...

  6. Hybrid框架UI重构之路：一、师其长技以自强

    这两年在支撑公司的Hybrid框架的运维发展,让人确认这种移动开发方式确实是一条不错的路.混合应用这种开发方式降低开发难度,极大的提高开发效率,最重要的一点效果可以接近原生应用.框架的本身是需要持续不 ...

  7. 程序新能优化-SQL优化

  8. 解决在使用client object model的时候报“object does not belong to a list”错误

    在查看别人代码的时候,发现了个有意思的问题,使用client object model将一个文件check in 我使用的是如下语句获取file Microsoft.SharePoint.Client ...

  9. select count(*)和select count(1)

    一般情况下,Select Count (*)和Select Count(1)两着返回结果是一样的 假如表沒有主键(Primary key), 那么count(1)比count(*)快, 如果有主键的話 ...

  10. Android性能优化的浅谈

    一.概要: 本文主要以Android的渲染机制.UI优化.多线程的处理.缓存处理.电量优化以及代码规范等几方面来简述Android的性能优化 二.渲染机制的优化: 大多数用户感知到的卡顿等性能问题的最 ...