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

浏览：627次- 评论：0次- 发布时间：2019-08-22

Html

Css

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

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

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

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;}
.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;}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：纯CSS制作对话框气泡如果气泡柱在一个有背景的盒子里，IE6下，将white改为和背景色一样的颜色即可。

如果气泡柱在一个有背景的盒子里，IE6下，将white改为和背景色一样的颜色即可。

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取