How to make a small sharp corner chat? Pure CSS make small sharp corners 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:

<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:

<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. Free CSS Online video tutorial

2. CSS Online Manual

3. php.cn Lonely Nine-base (2)-css video tutorial