CSS implements a rectangular effect with a triangular small arrow

CSS implements a rectangular effect with a triangular small arrow:
Now more popular with the small arrow rectangle effect, such as the mouse pop-up cue effect, there are similar dialogue content, from the visual more beautiful, but also more humane, if it is CSS3 words easier to achieve, but there is still a lot of browser compatibility, The following describes a code that is compatible with all browsers.
The code is as follows:

<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><style>. W{width:200px;position:Absolute;background:#999; Left:400px;Top:200px;font-size:12px;text-align: Left}. x{width:180px;position:relative;background:#ff9;Border:1px solid #F96;padding:10px; Left:-4px;Top:-4px;}. Y,. Z{position:Absolute; Left:130px;}. Y{Color:#ff9;Top:-6px;}. Z{Color:#f96;Top:-7px;}</style></Head><Body><Divclass= "W">  <Divclass= "X">    <P>Ant Tribe welcomes You</P>    <Divclass= "Z">& #9670</Div>    <Divclass= "Y">& #9670</Div>  </Div></Div></Body></HTML>

The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=11571

For more information, refer to: http://www.softwhy.com/divcss/

CSS implements a rectangular effect with a triangular small arrow