Border problem of css bubble chat box

& lthead & gt

& ltmeta？ http-equiv="Content-Type "？ content = " text/html； ? charset=UTF-8 " >

& lttitle & gt untitled document

& lt style? type="text/css " >

Text, html{

Margin: 0px

Height:100%;

}

. Automatic height {

Width:100px;

Height:100%;

Background: red;

}

& lt/style & gt；

& lt style? type="text/css " >

div{？ Background:? # FFF；

Font series:? "Microsoft yahei";

top:？ 10%;

Location:? Absolutely;

Left:? 50%;

Show:? Embedded block;

Fill:? 10px；

Border radius:? 10px；

Box shadow:? 1px？ 1px？ 3px？ rgba(0，0，0，0.2)； }

Div: before? {

Left:? - 10px；

top:？ 50%;

Margins-Top:? -6px；

Location:? Absolutely;

Z index:? - 1;

Content:? "";

Width:? 0;

Height:? 0;

Top of border:? 8px？ Solid? Transparency;

Border-bottom:? 8px？ Solid? Transparency;

Right box:? 1 1px？ Solid? rgba(0，？ 0,? 0,? 0. 1);

Border-Left:? 0;

}

Div: after that? {

Left:? - 1 1px；

top:？ 50%;

Margins-Top:? -8px；

Location:? Absolutely;

Content:? "";

Width:? 0;

Height:? 0;

Top of border:? 8px？ Solid? Transparency;

Border-bottom:? 8px？ Solid? Transparency;

Right box:? 1 1px？ Solid? # FFF；

Border-Left:? 0;

} & lt/style & gt； & lt/head & gt；

& lt body? style= "

Background:? #369;

" & gt

& ltdiv & gt Hello.