CSS implementation bubble text Prompt box

css bubble text prompt box implementation of the Isosceles-right-angled dialog box

The effect is as follows:

The code is as follows:

CSS:
. Arrow span{border-color: #0FF #000 #f00 #ff0; top:0px;}

HTML:
<div class= "Detail" >
   <div class= "Arrow" >
     <em ></em><span></ span>
    </div>
</div>

Modify the code as:

. Arrow Span{border-color: #FFF  Transparent transparent;

Add code

. Arrow Em{border-color: #a1a1a1 transparent transparent;

The effect is as follows:

To add a style to the outer div:

the Isosceles-right-angled dialog box effect is as follows:

The code is as follows:

CSS:
. arrow{position:absolute; width:40px; height:40px; bottom:-40px; left:5px;}
. Arrow *{display:block; border-width:20px 20px; position:absolute; border-style:solid dashed dashed dashed; font-size:0; line-height:0;
Arrow Em{border-color: #a1a1a1 transparent transparent;
Arrow Span{border-color: #FFf  transparent  transparent;top:-4px;
detail{margin-top:100px width:280px; height:80px border:2px solid #a1a1a1; Position:relative;background-color: #FFF ; border-radius:7px; }

implementation of the Isosceles-style dialog box

Let's try changing the width of each border to make them different.
To modify the code:

. Arrow *{Display:block; border-width:30px 10px; position:absolute; border-style:solid dashed dashed dashed; font-size:0 ; line-height:0; }

The effect is as follows: