<div class="qipao_contianer">
            <div class="qipao_content yj3">NEW</div>
            <s><i></i></s>
 </div>

<Style>

/*气泡框*/
.qipao_contianer
{
 float:left;
font-size: 7px;
font-family: "Microsoft YaHei","微软雅黑",Helvetica,"黑体",Arial,Tahoma;
color:#fa0001;
display:block;
height:15px;
width:20px;
background-color:transparent;
*border:1px solid #eeb9bc;
}
s{
margin-top:-6px;
margin-left:-7px;
display:block;
height:0;
width:0;
font-size: 0;
line-height: 0;
border-color:transparent  red transparent transparent;
border-style:dashed solid dashed  dashed;
/*border-width:5px;*/
border-bottom: 2px solid transparent; /* 下边框的高 */
border-top: 2px solid transparent; /* 上方边框的高 */
border-right: 4px solid #eeb9bc; /* 左边框的长度|宽度,以及背景色 */
}
i{
margin-top:-1px;
margin-left:2px;
display:block;
height:0;
width:0;
font-size: 0;
line-height: 0;
border-color:transparent  #fff transparent transparent;
border-bottom: 1px solid transparent; /* 下边框的高 */
border-top: 1px solid transparent; /* 上方边框的高 */
border-right: 3px solid #fff; /* 左边框的长度|宽度,以及背景色 */
}
.qipao_content
{
display:block;
border:1px solid #eeb9bc;
background-color:#fff;
*border-top:1px solid #eeb9bc;
*border-top:1px solid #eeb9bc;
*border-left:none;
*border-right:none;
*height:8px;
*font-variant:small-caps;
text-align:center;
width:20px;
line-height:8px;
box-shadow: 3px 3px 4px #999;
-moz-box-shadow: 3px 3px 4px #999;
-webkit-box-shadow: 3px 3px 4px #999;
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";
}

</style>

CSS绘制无图片的气泡对话框的更多相关文章

  1. 纯css手写圆角气泡对话框 微信小程序和web都适用

    嗯……我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那种尖角的.这其中还遇上了个尴尬的问题,z-index不生效 无非就是两种方法,一种是使用图片再定位拼接起来使用,太简单了具体就不详细的说了. ...

  2. CSS页面重构“鑫三无准则”之“无图片”准则——张鑫旭

    一.再说关于“鑫三无准则” “鑫三无准则”这个概念貌似最早是在去年的去年一篇名叫“关于Google圆角高光高宽自适应按钮及其拓展”的文章中提过.这是自己在页面重构的经验中总结出来的一套约束自己CSS的 ...

  3. 网站性能优化之CSS无图片技术:三角形

    1.使用CSS无图片技术,可以总结得到以下三个优点: 减少请求资源的大小: 减少http的请求个数: 提高可维护性. 一.CSS无图片技术,微博中有哪些实际应用呢? 通过上面的展示,我们可以看到,无图 ...

  4. css实现圆角三角形例子(无图片)

    css实现圆角三角形例子(无图片) 以前我们做圆角时都会要用到图片来实现,今天我给大家整理的这款css圆角效果是不需要图片的纯css实现的哦,下面我们一起来看看吧. 效果如下图所示 三角形所对方向&q ...

  5. CSS绘制三角形和箭头,不用再用图片了

    前言 还在用图片制作箭头,三角形,那就太lou了.css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题. 先来看看这段代码: /**css*/.d1{ width: 0; he ...

  6. 用CSS绘制箭头等三角形图案 [译]

    最近重新设计了我的网站,准备添加tooltips提示信息效果.实现很容易,但我想要让提示功能具有三角形的指示图标.当我重新思考想要所设计的每个图标颜色都随心所欲的时候,采用图片那就是一场灾难.幸运的是 ...

  7. CSS绘制简单图形

    究竟该用字体图标.图片图标.还是CSS画一个图标?我也不知道.各有千秋吧.本文将介绍如何用css绘制简单的图形,所有测试在chrome58.0完成,如果你不能得到正确结果请到caniuse查一查看看是 ...

  8. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

  9. 碉堡了! 纯 CSS 绘制《辛普森一家》人物头像

    这篇文章给大家分享一组纯 CSS 绘制的<辛普森一家>人物头像.<辛普森一家>(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧.该剧通过对霍 ...

随机推荐

  1. Down to the TLP: How PCI express devices talk (Part I)

    http://xillybus.com/tutorials/pci-express-tlp-pcie-primer-tutorial-guide-1 Down to the TLP: How PCI ...

  2. thinkphp 删除该表的最后一行

    问题叙述性说明: 文章连接动态连接表格,因为有被添加.有必须删除.动态添加到表格这似乎有点不合理.它应该只被添加到表格行.而不是增加一个新表格. 发布完整的代码在这里,加入表格新行和删除表格最后一行. ...

  3. WinForm实现类似QQ停靠,显示隐藏过程添加特效效果

    原文:WinForm实现类似QQ停靠,显示隐藏过程添加特效效果 这可能是个老题长谈的问题了,只是在项目中会用到这个效果,所以今天做个记录.大家见了别喷我.在项目中的需求是这样的. 打开程序,在屏幕的右 ...

  4. VS扩展开发框架

    VsSharp:一个VS扩展开发框架(上) 上篇:设计 一.引子 自2008年起开发SSMS插件SqlSharp(er)的过程中,有一天发现多数代码都大同小异,就像这样. Commands2 comm ...

  5. ASP.NET MVC 使用TryUpdateModel 更新的技巧

    有使用 ASP.NET MVC 的朋友應該會對於 TryUpdateModel 有一定的認知,他不但可以利用 Metadata 來做欄位的驗證確保資料的正確性,也可以指定更新的條件以及不更新的條件來達 ...

  6. .NET中IDisposable接口的基本使用

    首先来看MSDN中关于这个接口的说明: [ComVisible(true)] public interface IDisposable { // Methods void Dispose(); } 1 ...

  7. CSharp设计模式读书笔记(19):备忘录模式(学习难度:★★☆☆☆,使用频率:★★☆☆☆)

    备忘录模式(Memento Pattern):在不破坏封装的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态,这样可以在以后将对象恢复到原先保存的状态.它是一种对象行为型模式,其别名为Tok ...

  8. CSharp设计模式读书笔记(17):迭代器模式(学习难度:★★★☆☆,使用频率:★★★★★)

    迭代器模式(Iterator Pattern):提供一种方法来访问聚合对象,而不用暴露这个对象的内部表示,其别名为游标(Cursor). 模式角色与结构: 实现代码: using System; us ...

  9. MAC 命令行工具(Command Line Tools)安装

    不过升级后安装命令行工具(Command Line Tools)时发现官网没有clt的下载安装包了,原来改了,使用命令在线安装. 打开终端,输入命令:xcode-select --install 选择 ...

  10. E: 无法获取锁 /var/lib/apt/lists/lock - open (11: Resource temporarily unavailable)解决方法

    /*********************************************************************  * Author  : Samson  * Date   ...