纯CSS箭头提示框

最新推荐文章于 2023-08-10 09:17:38 发布

原创最新推荐文章于 2023-08-10 09:17:38 发布 · 396 阅读

CC 4.0 BY-SA版权

纯CSS构造出来的三角箭头，很巧妙。

原理很简单，就当元素宽、高为零，且其他边为透明颜色时，哪个边有颜色，那么这个边就形成一个三角。
下面贴出来相应例子。
效果图如下：
这里写图片描述
代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body{padding:50px}
            .content{width:200px;min-height:40px;background:#CCFF99;position:relative;padding:10px;margin:20px}
            /*以下是箭头的css*/
            .arrow_top{display:block;overflow:hidden;width:0px;height:0px;padding:0;font-size:0;border:10px solid transparent;
            border-bottom-style:solid;border-bottom-color:#CCFF99;position:absolute;top:-20px;left:15px;}

            .arrow_left{display:block;overflow:hidden;width:0px;height:0px;padding:0;font-size:0;border:10px solid transparent;
            border-right-style:solid;border-right-color:#CCFF99;position:absolute;top:15px;left:-20px;}

            .arrow_right{display:block;overflow:hidden;width:0px;height:0px;padding:0;font-size:0;border:10px solid transparent;
            border-left-style:solid;border-left-color:#CCFF99;position:absolute;top:15px;right:-20px;}

            .arrow_bottom{display:block;overflow:hidden;width:0px;height:0px;padding:0;font-size:0;border:10px solid transparent;
            border-top-style:solid;border-top-color:#CCFF99;position:absolute;top:100%;left:15px;}
            /*以下是阴影的css*/
            .boxshadow{box-shadow: 2px 2px 4px #999;-moz-box-shadow: 2px 2px 4px #999;-webkit-box-shadow: 2px 2px 4px #999;
             /* For IE 8 */-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')"; }
        </style>
    </head>
    <body>


        <div class="content">
            <span class="arrow_top"></span>
            这是箭头在上面的这是箭头在上面的这是箭头在上面的这是箭头在上面的这是箭头在上面的这是箭头在上面的
        </div>

        <div class="content">
            <span class="arrow_bottom"></span>
            这是箭头在下面的
        </div>

        <div class="content">
            <span class="arrow_left"></span>
            这是箭头在左面的
        </div>

        <div class="content">
            <span class="arrow_right"></span>
            这是箭头在右面的
        </div>


        <div class="content boxshadow">
            <span class="arrow_top"></span>
            我是加了阴影的提示框 感觉高大上
        </div>


    </body>
</html>

其中的阴影只是简单的应用了一下，但是效果不错。
{box-shadow: X轴偏移量 Y轴偏移量阴影模糊半径阴影颜色}
X轴偏移量 Y轴偏移量都为0 阴影模糊半径>0是四面阴影。
阴影相关知识可参考：
http://blog.youkuaiyun.com/freshlover/article/details/7610269
http://www.dabaoku.com/jiaocheng/wangye/css/201107279598.shtml
http://www.jb51.net/css/63281.html