CSS-only small triangle prompts and css triangle prompts

CSS-only small triangle prompts and css triangle prompts

The effect after implementation is as follows:

Without Borders

Border

Two implementation methods are provided here:

1. Non-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 the rounded corner */-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;}/* Top 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;}/* bottom 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 only implements triangles and has no other functions --> </div> hello, I was born <br/> hello, I was born </div> <div class = "entry"> <div class = "entry-trangle-right"> <! -- This Div only implements triangles and has no other functions --> </div> hello, I was born <br/> hello, I was born </div> <div class = "entry"> <div class = "entry-trangle-top"> <! -- This Div only implements triangles and has no other functions --> </div> hello, I was born <br/> hello, I was born </div> <div class = "entry"> <div class = "entry-trangle-bottom"> <! -- This Div only implements triangles and has no other functions --> </div> hello, I was born <br/> hello, I was born </div>

2. Border

Css:

/* Top triangle */. tag-top {margin: 20px; padding: 5px; width: 300px; height: 60px; border: 2px solid # f99; position: relative; background-color: # FFF; /* set the rounded corner */-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 solid; border-color: transparent # f99 transparent; font-size: 0; line-height: 0 ;}. tag-top: after {top:-27px; border-color: 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 the rounded corner */-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 solid; border-color: # f99 transparent; font-size: 0; line-height: 0 ;}. tag-bottom: after {bottom:-27px; border-color: # FFF transparent;}/* Left triangle */. tag-left {margin: 20px; padding: 5px; width: 300px; height: 60px; border: 2px solid # f99; position: relative; background-color: # FFF; /* set the rounded corner */-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 dashed; border-color: transparent # f99 transparent; font-size: 0; line-height: 0 ;}. tag-left: after {left:-27px; border-color: transparent # FFF transparent ;}. tag-right {margin: 20px; padding: 5px; width: 300px; height: 60px; border: 2px solid # f99; position: relative; background-color: # FFF; /* set the rounded corner */-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 dashed; border-color: transparent # f99; font-size: 0; line-height: 0 ;}. tag-right: after {right:-27px; border-color: 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 color to 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; /* set the rounded corner */-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 dashed; border-color: transparent # FFF; font-size: 0; line-height: 0 ;}. tag-right-noborder: after {right:-27px; border-color: transparent # FFF ;}

Html:

<Div class = "tag-right-noborder"> css3 bubble box </div>

After implementation:

If you have any questions, contact:

QQ: 1004740957

Email: niujp08@qq.com