tips终极方案

/* 兼容解决方案：菱形 */
.diamond{
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(
	M11=0.7071067811865475,
	M12=-0.7071067811865477,
	M21=0.7071067811865477,
	M22=0.7071067811865475,
	SizingMethod='auto expand'
);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform:rotate(45deg);
}
:root .diamond{filter:none9;}

/* Tips 组件 */
.tips{position:absolute;background: #fff8e8;border:1px solid #ffba00;padding:10px;}
.tips-angle{position:absolute;display:block;width:8px;height:8px;font-size:0;background:#fff8ef;border-left:1px solid #ffba00;border-top:1px solid #ffba00;top:-5px;top:-6px9;left:10px;}

 

 

<div class="tips">
<div class="tips-text"> Lorem ipsum dolor sit amet. </div><div class="tips-angle diamond"></div></div>

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">