Pure CSS implementation of the small Triangle tip information

The following results are achieved:

Without a border

With a border

Here are two ways to achieve this:

1, without a 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;            /* Set rounded corners */-webkit-border-radius:5px;            -moz-border-radius:5px;        border-radius:5px;            }/* Left triangle */. 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;            }/* Right triangle */. 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;            }/* Upper triangle */. 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;            }/* Lower triangle */. 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" ><!--this div to implement triangles only, no other effect--></div>    Hello, I was born <br/>    Hello, I was born </div><div class= "entry" >    <div class= " Entry-trangle-right "><!--this div only to achieve the triangle, no other role--></div>    Hello, I was born <br/>    Hello, I was born </div><div class= "Entry" >    <div class= "Entry-trangle-top" ><!--this div to implement triangles only, no other action-- </div>    Hello, I was born <br/>    Hello, I was born </div><div class= "entry" >    <div class= " Entry-trangle-bottom "><!--this div only to achieve the triangle, no other role--></div>    Hello, I was born <br/>    Hello, I was born </div>

2, with a border

Css:

 /* Upper triangle */. tag-top{margin:20px;             padding:5px;             width:300px;             height:60px;             border:2px solid #f99;             position:relative;             Background-color: #FFF;             /* Set rounded corners */-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;            }/* Lower triangle */. tag-bottom{margin:20px;            padding:5px;            width:300px;           height:60px; border:2px solid #f99;            position:relative;            Background-color: #FFF;            /* Set rounded corners */-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;            }/* Left triangle */. tag-left{margin:20px;            padding:5px;            width:300px;            height:60px;            border:2px solid #f99;            position:relative;            Background-color: #FFF; /* Set rounded corners */-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;            /* Set rounded corners */-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 Bubble box </div><div class= "Tag-bottom" >    css3 Bubble Box </div><div class= "Tag-left" >    css3 Bubble box </div><div class= "Tag-right" >    css3 Bubble Box </div>

In addition, if you set the border to the same color 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;            /* Set rounded corners */            -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 Bubble Box </div>

The effect after implementation:

If you have any questions, you can contact:

qq:1004740957

Email:[email protected]

Pure CSS implementation of the small Triangle tip information