html制作带有尖角的边框,纯CSS3制作带尖角的气泡对话框实例特效代码

脚本代码(For Alixixi.com)如下:

纯CSS制作的对话框特效代码 by js.alixixi.com

.org_box{width:500px; height:80px; line-height:40px; margin:40px auto; padding-left:2em; background:#F3961C;font-size:12px; position:relative; }

.org_box_cor{ width:0; height:0; font-size:0;border-style:solid;overflow:hidden; position:absolute; }

.cor1{border-width:20px;border-color:#f3961c transparent transparent transparent;left:60px; bottom:-40px;}

.cor2{border-width:20px;border-color:transparent #f3961c transparent transparent;left:-40px; bottom:30px;}

.cor3{border-width:20px;border-color:transparent transparent #f3961c transparent;left:80px; top:-40px;}

.cor4{border-width:20px;border-color:transparent transparent transparent #f3961c;right:-40px; bottom:30px;}

.cor5{border-width:20px 10px;border-color:#f3961c #f3961c transparent transparent;left:60px; bottom:-40px;}

.cor6{border-width:20px 10px;border-color:#f3961c transparent #f00 transparent;left:-40px; bottom:30px;}

.cor7{border-width:20px 10px;border-color:transparent #f3961c #f3961c transparent;left:80px; top:-40px;}

.box1{height:40px;background:#000;position:relative;}

.corner{width:0;height:0;font-size:0;border-width:20px 20px 20px;border-style:solid;border-color:#f00 transparent #f00 #f00 ;_border-color: #f00 white white white ;position:absolute;left:0;bottom:0;overflow:hidden;}

上边框有颜色,所以箭头冲下,定位的负值是边框宽度的2倍，宽度只有一个值，是等边三角形.要专门给IE6写HACK，将对应的transparent改为white.(以下省略这句描述)。

js.alixixi.com 右边框有颜色值,所以箭头冲左

js.alixixi.com 下边框有颜色,所以箭头冲上

js.alixixi.com 左边框有颜色,所以箭头冲右

上，右有颜色值，(宽度有两个值且不等，大家可以任意排列组合，图案很丰富)

上，下颜色值(颜色值不一样，有惊喜,沙漏？高脚杯)

右下有颜色值

三个颜色值，有时也能用上,同样，改变颜色值顺序，开口方向不同。

地方了宋德福

html制作带有尖角的边框,纯CSS3制作带尖角的气泡对话框实例特效代码相关推荐

纯CSS3编写的红色下拉导航菜单js特效代码
下载地址一款纯css3 transition属性制作红色的导航菜单,鼠标悬停展开下拉菜单,支持三级下拉菜单代码.@charset "utf-8";/*导航栏*/.nav_menu ...
html 边框立体效果,用纯CSS3制作的效果非常炫酷的元素边框线条动画特效
插件描述:这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效.这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果. 这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条 ...
css3直线运动_用纯CSS3制作的效果非常炫酷的元素边框线条动画特效
插件描述:这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效.这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果. 这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条 ...
纯html5语言编写的动画,8个纯CSS3制作的动画应用及源码
本文作者html5tricks,转载请注明出处对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以 ...
纯CSS3制作的圆角效果按钮菜单
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
css3蒙版运动,纯CSS3制作逼真的汽车运动动画
简要教程这是一款使用纯CSS3制作的逼真汽车运动动画特效.该特效中,所有元素都是通过CSS渲染得到的,没有使用任何图片.它通过公路斑马线的左右晃动来制作出汽车运动的视觉效果. 使用方法 HTML结构 ...
html火影忍者网页设计作品,纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例...
本文实例讲述了纯css3制作的火影忍者中写轮眼开眼至轮回眼及进化过程实现方法.分享给大家供大家参考.具体分析如下: 今天是火影忍者(漫画)宣告完结的日子.看过火影的朋友都知道,写轮眼是什么,这里就不多 ...
纯CSS3制作逼真的iphone 6手机模型
注意这里我只是转载过来的(来自 jQuery之家的分享),然后加以整理.嘻嘻~ 纯CSS3制作逼真的iphone 6手机模型 iphone.html <div class="ipho ...
css3 动画翅膀震动,纯css3制作煽动翅膀的蝴蝶
纯css3制作煽动翅膀的蝴蝶,先看效果怎么样,效果还不错吧上代码: html cssbody{ background: url("./images/bg.jpg&q ...
css 圆形背景icon_纯CSS3制作精美的圆形扁平风格图标
这是一组使用纯CSS3制作的精美的扁平风格的圆形图标.这些圆形图标都是使用CSS的伪元素来制作,是一套以家居为主题的图标,包括门窗,邮箱,浴室,台灯书柜等等10个图标. 制作方法 HTML结构图标的 ...

html制作带有尖角的边框,纯CSS3制作带尖角的气泡对话框实例特效代码

html制作带有尖角的边框,纯CSS3制作带尖角的气泡对话框实例特效代码相关推荐

最新文章

热门文章