CSS-only small triangle prompts and css triangle prompts

Source: Internet
Author: User

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


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.