Dreamweaver How to make a chat box bubble effect in CSS

First look at what we need to achieve an effect!

OK, finish the effect, then, with CSS how to achieve this effect? First, write a simple code:

Copy code code as follows:

<div class= "Arrow" ></div>

<style type= "Text/css" >

. Arrow {

width:0;

height:0;

font-size:0;

Border:solid 10px #000;

}</style>

Here, we can get a black square, in fact, this is the frame, because the width and height of the div is 0, then, we specifically to see, div width and height are 0 o'clock, it's the top and bottom of the four border is how, the following we put the color of the border of the different colors:

Copy code code as follows:

<div class= "Arrow" ></div>

<style type= "Text/css" >

. Arrow {

width:0;

height:0;

font-size:0;

Border:solid 10px;

Border-color: #f00 #0f0 #00f #000;

}

</style>

We found that when the width and height of the div is 0, its entire border is composed of four triangles, each side is a triangle, then we can use this feature, to make cute little sharp corners. All we have to do is set the color of the unwanted three-side border (triangle) to the same background, so that you can only see the triangle you want, and then use the positioning to adjust the position. The specific code looks like this:

Copy code code as follows:

<div class= "Send" >

<div class= "Arrow" ></div>

</div>

<style type= "Text/css" >

Body {

Background: #4D4948;

}

. Send {

position:relative;

width:150px;

height:35px;

Background: #F8C301;

border-radius:5px; /* Rounded Corner * *

margin:30px Auto 0;

}

. Send. Arrow {

Position:absolute;

top:5px;

right:-16px; * The position of rounded corners needs careful debugging OH * *

width:0;

height:0;

font-size:0;

Border:solid 8px;

Border-color: #4D4948 #4D4948 #4D4948 #F8C301;

}

</style>

Finished, the effect of the following figure: