利用css制作简单的提示框_html/css

1.首先类似一个长方形右上角一个关闭按钮

这里用到的主要是一些定位的知识，运用relative和absolute可以快速制作这样的一个提示框，想详细了解，点击这里

html代码：

 提示信息 × 

css代码：

　　　　 #position { 　position: relative; 　 width: 500px; 　 height: 400px; margin: 0 auto; 　 color: #fff; 　 background: #66cccc;　　　　 } 　　　　#position .position-relative { position: relative; top: 20px; left: 20px; width: 300px; height: 200px; padding: 20px; background: #999; } #position .position-relative .icon { display: block; position: absolute; top: -10px; right: -10px; overflow: hidden; /* white-space: nowrap; text-overflow: ellipsis; */ border-radius: 50%; width: 20px; height: 20px; line-height: 20px; color: #eee; font-style: normal; text-align: center; background: #666; }

2.还有类似这种qq对话框

有了定位的知识后，这种对话框主要就是左边的小三角的制作了，其实这个我们可以利用border来制作，首先我们先来开一个例子:

我们就给一个span标签来看看

html

css

.icon-s { display: block; margin: 0 auto; width: 0; height: 0; border-style: solid; border-width: 40px; border-top-color: red; border-right-color: blue; border-bottom-color: yellow; border-left-color: black;}

我们来看看效果：

怎么样！很神奇对不对！其实到这里我们就可以看到我们要的三角形了，我们只要保留四个中的一个就行了，那么将其他三边设置为透明就行了

css

.icon-s { display: block; margin: 0 auto; width: 0; height: 0; border-style: solid; border-width: 40px; border-top-color: transparent; /*-*/ border-right-color: red; border-bottom-color: transparent; /*-*/
 border-left-color: transparent; /*-*/
}

现在我们可以看到一个基本的雏形，接下来我们在来改改，把上边框的高度设为0，右边框的宽度设长一点

css:

.icon-s { display: block; margin: 0 auto; width: 0; height: 0; border-style: solid; border-width: 40px; border-top-width: 0; // border-right-width: 70px; // border-top-color: transparent; border-right-color: red; border-bottom-color: transparent; border-left-color: transparent;}

这样子左边的三角形就出来了，接下来我们来简化一下代码：

.icon-s { display: block; margin: 0 auto; width: 0; height: 0; border-style: solid; border-color: transparent red transparent transparent; border-width: 0 70px 40px 40px;}

考虑到IE低版本不支持transparent 属性我们可以设置dotted或是dashed

原因是在IE6下, 点线与虚线均以边框宽度为基准,点线长度必须是其宽度的3倍以上（height>=border-width*3）,虚线宽长度必须是其宽度的5倍 以上（height>=border-width*5）,否则点线和虚线都不会出现.

.icon-s { display: block; margin: 0 auto; width: 0; height: 0; border-style: dashed solid dashed dashed; border-color: transparent red transparent transparent; border-width: 0 70px 40px 40px; }

完整的demo：

          提示信息 × 这里是提示信息！！！