欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

纯CSS实现小三角提示信息_html/css_WEB-ITnose

程序员文章站 2022-05-30 15:57:21
...
实现后的效果如下:


不带边框的


带边框的

在此提供两种实现方式:

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,我出生了
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