hello,我出生了
hello,我出生了
纯CSS实现小三角提示信息_html/css_WEB-ITnose
程序员文章站
2022-05-30 15:57:21
...
实现后的效果如下:
html:
2、带边框的
html:
实现后的效果:
不带边框的
带边框的
在此提供两种实现方式:
1、不带边框的
css:
*{margin:0;padding:0;} body{ background:#666; font:14px/20px "Microsoft YaHei"; text-align: left; } .entry{ position: relative; margin-left: 20px; margin-top:20px; width:200px; background:#fff; padding:10px; /*设置圆角*/ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } /*左三角*/ .entry-trangle-left{ position:absolute; bottom:15px; left:-10px; width:0; height:0; border-top:15px solid transparent; border-bottom:15px solid transparent; border-right:15px solid #fff; } /*右三角*/ .entry-trangle-right{ position:absolute; top:15px; right:-10px; width:0; height:0; border-top:15px solid transparent; border-bottom:15px solid transparent; border-left:15px solid #fff; } /*上三角*/ .entry-trangle-top{ position:absolute; top:-10px; left:20px; width:0; height:0; border-left:15px solid transparent; border-right:15px solid transparent; border-bottom:15px solid #fff; } /*下三角*/ .entry-trangle-bottom{ position:absolute; bottom:-10px; left:20px; width:0; height:0; border-left:15px solid transparent; border-right:15px solid transparent; border-top:15px solid #fff; }
html:
hello,我出生了
hello,我出生了hello,我出生了
hello,我出生了hello,我出生了
hello,我出生了
2、带边框的
css:
/*上三角*/ .tag-top{ margin: 20px; padding: 5px; width:300px; height:60px; border:2px solid #f99; position:relative; background-color:#FFF; /*设置圆角*/ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .tag-top:before,.tag-top:after{ content:""; display:block; border-width:15px; position:absolute; top:-30px; left:100px; border-style:solid dashed dashed solid; border-color:transparent transparent #f99 transparent; font-size:0; line-height:0; } .tag-top:after{ top:-27px; border-color: transparent transparent #FFF transparent; } /*下三角*/ .tag-bottom{ margin: 20px; padding: 5px; width:300px; height:60px; border:2px solid #f99; position:relative; background-color:#FFF; /*设置圆角*/ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .tag-bottom:before,.tag-bottom:after{ content:""; display:block; border-width:15px; position:absolute; bottom:-30px; left:100px; border-style:solid dashed dashed solid; border-color:#f99 transparent transparent transparent; font-size:0; line-height:0; } .tag-bottom:after{ bottom:-27px; border-color: #FFF transparent transparent transparent; } /*左三角*/ .tag-left{ margin: 20px; padding: 5px; width:300px; height:60px; border:2px solid #f99; position:relative; background-color:#FFF; /*设置圆角*/ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .tag-left:before,.tag-left:after{ content:""; display:block; border-width:15px; position:absolute; left:-30px; top:20px; border-style:dashed solid solid dashed; border-color:transparent #f99 transparent transparent; font-size:0; line-height:0; } .tag-left:after{ left:-27px; border-color:transparent #FFF transparent transparent ; } .tag-right{ margin: 20px; padding: 5px; width:300px; height:60px; border:2px solid #f99; position:relative; background-color:#FFF; /*设置圆角*/ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .tag-right:before,.tag-right:after{ content:""; display:block; border-width:15px; position:absolute; right:-30px; top:20px; border-style:dashed solid solid dashed; border-color:transparent transparent transparent #f99; font-size:0; line-height:0; } .tag-right:after{ right:-27px; border-color:transparent transparent transparent #FFF ; }html:
此外,如若,设置边框的颜色与背景色相同,也能得到没有边框的:css3气泡框css3气泡框css3气泡框css3气泡框
css:
.tag-right-noborder{ margin: 20px; padding: 5px; width:300px; height:60px; border:2px solid #FFF; position:relative; background-color:#FFF; /*设置圆角*/ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .tag-right-noborder:before,.tag-right-noborder:after{ content:""; display:block; border-width:15px; position:absolute; right:-30px; top:20px; border-style:dashed solid solid dashed; border-color:transparent transparent transparent #FFF; font-size:0; line-height:0; } .tag-right-noborder:after{ right:-27px; border-color:transparent transparent transparent #FFF ; }
html:
css3气泡框
实现后的效果:
如有疑问,可联系:
QQ:1004740957
Email:niujp08@qq.com
推荐阅读
-
纯CSS3实现图片展示特效_html/css_WEB-ITnose
-
一款纯css3实现的响应式导航_html/css_WEB-ITnose
-
一款简洁的纯css3代码实现的动画导航_html/css_WEB-ITnose
-
一款纯css3实现的机器人看书动画效果_html/css_WEB-ITnose
-
纯CSS实现面包屑式导航_html/css_WEB-ITnose
-
纯CSS3实现动态火车行驶特效_html/css_WEB-ITnose
-
有大神进来 ,判断手机和电脑访问 延时提示信息框并跳转到相应页面_html/css_WEB-ITnose
-
纯CSS3实现动态火车行驶特效_html/css_WEB-ITnose
-
纯CSS3实现漂亮的价格表样式代码_html/css_WEB-ITnose
-
一款简洁的纯css3代码实现的动画导航_html/css_WEB-ITnose