Use CSS3 to implement div boxes with small triangles (without images) and css3div

Use CSS3 to implement div boxes with small triangles (without images) and css3div

Now we can see a lot of boxes with small triangles, such as QQ for Mac and timeline of QQ space, there is a rectangle with a small triangle around the content in the chat or posting status, and it looks very good, so I decided to manually write one, the last time I used the offset background image method, I don't need images today. Use CSS3 for implementation. Let's take a look at the implementation code.

First, let's take a look at the principle of implementing triangles in CSS3: it is actually an application of transparent.

If the html code is like this

<Div class = "arrow-up"> <! -- Triangle up --> </div> <div class = "arrow-down"> <! -- Triangle down --> </div> <div class = "arrow-left"> <! -- Triangle to the left --> </div> <div class = "arrow-right"> <! -- Triangle to the right --> </div>

The following uses CSS3 to realize the triangle of Up, down, left, and right respectively.

/* Arrow up */. arrow-up {width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid # fff ;} /* arrow down */. arrow-down {width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid # 0066cc ;} /* arrow to left */. arrow-left {width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-right: 30px solid yellow ;} /* arrow to the right */. arrow-right {width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid green ;}

After the OK code is sorted together, the effect is probably as follows:

 

Now that we understand the principle, let's take a look at it to implement a div box with a small triangle.

 

First, write the html code:

<Div class = "entry"> <div class = "entry-trangle"> <! -- This Div only implements triangles and has no other functions --> </div> hello, I was born <br/> hello, I was born <br/> hello, I was born <br/> hello, I was born <br/> </div>

The div with a class "entry-trangle" is mounted only for small triangles. Use the transparent of css3 to implement the triangle for this div, and then absolutely locate and set z-index:-1; and margin-left:-19px;. See the following css code:

<Style type = "text/css"> * {margin: 0; padding: 0;} body {background: #666; font: 14px/20px "Microsoft YaHei ";}. entry {margin: 0 auto; margin-top: 20px; width: 280px; background: # fff; padding: 10px;/* Set rounded corner */-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px ;}. entry-trangle {position: absolute; margin-left:-19px; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid # fff; z-index:-1 ;}</style>

Border-radius: 5px; usedAchieve rounded corners; absolute positioning,The purpose of z-index:-1 is to make the div that controls the small triangle at the bottom layer, without affecting the content layout in the parent div.

Now, we have finished the process.