Implementation of CSS dialog box

Straight into the chase, here are the HTML parts of the two implementations:

1 <Divclass= "One">2     <em></em><span></span>    3 I am the first dialog box4 </Div>5 <Divclass= "both">6 I am the second dialog box7 </Div>

The first kind of CSS style is as follows:

1 /*One css Bubble box*/2 . One{3 position:relative;width:300px;Height:100px;Border:3px Solid #09f;4}5 . One em,. One span{6 position:Absolute;Top:100px; Left:20px;Display:Block;Border-width:15px;Border-style:Solid Dashed dashed;7}8 . One EM{9 Border-color:#09F Transparent Transparent;Ten} One . One span{ A Top:96px;Border-color:#FFF Transparent Transparent; -}

The second kind of CSS style is as follows:

/*The use of inheritance*/. the{position:relative;width:300px;Height:100px;Border:3px Solid #f60;background:#fff;}. Two::after{position:Absolute;Bottom:-12px; Left:20px;padding:8px;Border:Inherit;Border-left:None;Border-top:None;content:"";background:Inherit;
-webkit-transform:Rotate (45deg);-moz-transform:Rotate (45deg);Transform:Rotate (45deg);}

From the above code, it is not easy to see the second method, whether from HTML or CSS, are more concise. The second method uses a tag, using pseudo-classes and inheritance. It's not only easy to understand, but also easier to change.

Implementation of CSS dialog box