Pure CSS to implement small triangle prompt information_html/css_WEB-ITnose

The effect after implementation is as follows:

Without border

With border

Here are two implementation methods:

1. Without border

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:

<div class="entry">    <div class="entry-trangle-left"><!--本Div只来实现三角形，无其他作用--></div>    hello，我出生了<br/>    hello，我出生了</div><div class="entry">    <div class="entry-trangle-right"><!--本Div只来实现三角形，无其他作用--></div>    hello，我出生了<br/>    hello，我出生了</div><div class="entry">    <div class="entry-trangle-top"><!--本Div只来实现三角形，无其他作用--></div>    hello，我出生了<br/>    hello，我出生了</div><div class="entry">    <div class="entry-trangle-bottom"><!--本Div只来实现三角形，无其他作用--></div>    hello，我出生了<br/>    hello，我出生了</div>

2. Bordered

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:

<div class="tag-top">    css3气泡框</div><div class="tag-bottom">    css3气泡框</div><div class="tag-left">    css3气泡框</div><div class="tag-right">    css3气泡框</div>

In addition, if you set the border color to be the same as the background color, you can also get no border:

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:

<div class="tag-right-noborder">    css3气泡框</div>

Effect after implementation:

If you have any questions, you can contact:

QQ: 1004740957

Email: niujp08@qq.com