arrowTip 提示 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title>锚点位置偏移</title>
    <style type="text/css">
        body
        {
        }

        div
        {
            background-color: #fff;
            position: relative;
        }

        .text
        {
            width: 50%;
            height: 100px;
            margin: 10px;
            border-radius: 5px;
            border: 1px solid #f00;
            background-color: #ccc;
        }

        .arrowTip
        {
            border: 5px solid #ccc;
            border-color: transparent transparent #ccc transparent;
            width: 0px;
            line-height: 0px;
            height: 0px;
            position: absolute;
            display: block;
        }

        .top
        {
            left: 40px;
            top: -10px;
            border-color: transparent transparent #ccc transparent;
        }

        .left
        {
            border-color: transparent #ccc transparent transparent;
            left: 0px;
            top: 30px;
        }

        .right
        {
            border-color: transparent transparent transparent #ccc;
            left: 50%;
            top: 30px;
            margin-left: 12px;
        }

        .bottom
        {
            border-color: #ccc transparent transparent transparent;
            left: 50px;
            bottom: -10px;
        }

        .clear
        {
            clear: both;
        }
    </style>
</head>
<body>
    <div>
        <span class="arrowTip top"></span>
        <div class="text">top  底端需要一定高度才可以保证滚动条有足够高度让标题5到达指定位置</div>
    </div>
    <div class="clear"></div>
    <div>
        <span class="arrowTip left"></span>
        <div class="text">left  底端需要一定高度才可以保证滚动条有足够高度让标题5到达指定位置</div>
    </div>
    <div class="clear"></div>
    <div>
        <span class="arrowTip right"></span>
        <div class="text">right  底端需要一定高度才可以保证滚动条有足够高度让标题5到达指定位置</div>
    </div>
    <div>
        <span class="arrowTip bottom"></span>
        <div class="text">bottom  底端需要一定高度才可以保证滚动条有足够高度让标题5到达指定位置</div>
    </div>
</body>
</html>

 

posted @ 2015-06-09 15:47  bluthly  阅读(231)  评论(0)  编辑  收藏  举报