Css writing at the surfaced layer, which is perfectly compatible with IE6 ~ 10, cssie6

Css writing at the surfaced layer, which is perfectly compatible with IE6 ~ 10, cssie6

The absolute positioning difference between elements is one pixel, and different colors are used to make the appearance of small triangles, which is perfectly compatible with various browsers!

Html section:

<Div class = "poptip"> <span class = "poptip-arrow-top"> <em> ◆ </em> <I> ◆ </I> </span> <span class = "poptip-arrow-right"> <em> ◆ </em> <I> ◆ </I> </span> <span class = "poptip-arrow-bottom"> <em> ◆ </em> <I> ◆ </I> </span> <span class = "poptip- arrow poptip-arrow-left "> <em> ◆ </em> <I> ◆ </I> </span> Hi, do you know? <Br> I am using soy sauce! </Div>

Css section:

/* poptip */.poptip{position: absolute;top: 20px;left:20px;padding: 6px 10px 5px;*padding: 7px 10px 4px;line-height: 16px;color: #DB7C22;font-size: 12px;background-color: #FFFCEF;border: solid 1px #FFBB76;border-radius: 2px;box-shadow: 0 0 3px #ddd;}.poptip-arrow{position: absolute;overflow: hidden;font-style: normal;font-family: simsun;font-size: 12px;text-shadow:0 0 2px #ccc;}.poptip-arrow em,.poptip-arrow i{position: absolute;left:0;top:0;font-style: normal;}.poptip-arrow em{color: #FFBB76;}.poptip-arrow i{color: #FFFCEF;text-shadow:none;}.poptip-arrow-top,.poptip-arrow-bottom{height: 6px;width: 12px;left:12px;margin-left:-6px;}.poptip-arrow-left,.poptip-arrow-right{height: 12px;width: 6px;top: 12px;margin-top:-6px;}.poptip-arrow-top{top: -6px;}.poptip-arrow-top em{top: -1px;}.poptip-arrow-top i{top: 0px;}.poptip-arrow-bottom{bottom: -6px;}.poptip-arrow-bottom em{top: -8px;}.poptip-arrow-bottom i{top: -9px;}.poptip-arrow-left{left:-6px;}.poptip-arrow-left em{left:1px;}.poptip-arrow-left i{left:2px;}.poptip-arrow-right{right:-6px;}.poptip-arrow-right em{left:-6px;}.poptip-arrow-right i{left:-7px;}

Ps: If the triangle needs to be centered, either left or top 50%