Use CSS to make chat box small sharp corner, bubble effect

Often see such a sharp angle, previously did not understand, thought are made out of pictures, and then surprised to find that many of them are made with CSS, both beautiful and save resources, really the both worlds!

So, how do you do this with CSS? First, write a simple code:

The code is as follows:

<p class= "Arrow" ></p><style type= "Text/css" >.arrow {    width:0;    height:0;    Font-size:0;border:solid 10px #000;} </style>

Here, we can get a black square, which is actually a frame, because the width and height of p are all 0. So, we specifically to see, p width and height are 0 o'clock, it's up and down the four borders are what, below we have the border of each side color set to a different color:

The code is as follows:

<p class= "Arrow" ></p><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 p is 0, its entire frame is composed of four triangles, each side of a triangle, then we can use this feature, to do cute small sharp angle. We just set the unwanted three-side border (triangle) color to be the same as the background, so you can only see the triangle you want, and then use the positioning to adjust the position. The specific code looks like this:

The code is as follows:

<p class= "Send" >    <p class= "Arrow" ></p></p><style type= "Text/css" >body {    Background: #4D4948;}. Send {    position:relative;    width:150px;    height:35px;    Background: #F8C301;    border-radius:5px; /* Round corner */    margin:30px auto 0;}. Send. arrow {position:absolute;    top:5px;right:-16px; /* Fillet position requires careful commissioning oh */    width:0;    height:0;    font-size:0;    Border:solid 8px;    Border-color: #4D4948 #4D4948 #4D4948 #F8C301;} </style>

The results are as follows:

"Recommended"

1. CSS3 Free Video Tutorial

2. Browser for mobile high-performance CSS3 animation

3. H5+CSS3 code instances that implement picture fly-in and fade-out effects

4. Teach you to use CSS3 to make 8 kinds of loading animations

5. Teach you to use CSS to draw standard circular patterns