Pure CSS Implementation dialog box

If the width of a box is zero, then its four border will come together, become solid, and each border is a triangle, we can use the triangle to achieve the sharp chin of the dialogue box.

By setting the border on the left to have color, the lower right is set to transparent, in #demo:before placing a downward equilateral triangle, absolute positioning so that the top of the large box with the bottom of the box coincident.
Then by setting the left of the border to white, the right is set to transparent, in the large triangle placed a small white triangle, covering off part of the color, forming a pointed chin.
can be used #demo:before and #demo:after pseudo-elements to achieve, you can also place a small box in a large box and then absolutely positioning.

HTML code:

<p id= "Demo" ></p>

CSS code:

#demo {    width:200px;    height:100px;    Background: #FFF;    border:8px solid #666;    border-radius:30px;    box-shadow:2px 2px 4px #888;    position:relative;}            #demo: Before {    content: "";    Position:absolute;    left:30px;    top:100px;    border:25px solid;    Border-color: #666 transparent transparent #666;}            #demo: After {    content: "";    Position:absolute;    left:38px;    top:100px;    border:15px solid;    Border-color: #FFF transparent transparent #FFF;}

There are several details to note:

1. #demo:afterThe two colored borders should be the same as the background color of the box, so remember to set the background color for the box instead of the transparent one, where I set the box background to be the same white as the border.

2. There is absolute positioning, you can not give border settings width:0px;height:0px; , the normal situation is required, otherwise the border will stretch into a row.

3. For example, the two border of the black Triangle minus the two border of the white Triangle equals (c+d), and for the sake of aesthetics, d should be approximately equal to a (c must be an integer, so a cannot be an integer), and some calculations are needed here.