欢迎来到嘉裕传媒官网!让广告绚丽蜕变!为客户提供更出色的传播效果!
咨询,就免费赠送域名与服务器,咨询热线:当前位置: 嘉裕传媒 > 建站知识 > 建站知识 >
联系我们
QQ:14578345
电话咨询:
E-mail:bkook@126.com
地址:广西北流市城南一路

纯CSS实现箭头、气泡让提示功能具有三角形图标

作者/整理:嘉裕传媒     来源:www.jywlcm.net     发布时间:2016-11-10

/*向上箭头,类似A,只有三个边,不能指定上边框*/

        .arrow-up {
            width: 0px;
            height: 0px;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 30px solid yellow;
            /*以下属性可以是IE5兼容*/
            font-size: 0px;
            line-height: 0px;
        }
        /*向下箭头 ,类似 V*/
        .arrow-down {
            width: 0px;
            height: 0px;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-top: 30px solid blue;
            font-size: 0px;
            line-height: 0px;
        }
        /*向左的箭头:只有三个边:上,下,右。而<|总体来看,向左三角形的高=上+下边框的长度。宽=右边框的长度*/
        div.arrow-left {
            width: 0px;
            height: 0px;
            border-bottom: 30px solid transparent;
            border-top: 30px solid transparent;
            border-right: 40px solid green;
            font-size: 0px;
            line-height: 0px;
        }
        /*向右的箭头:只有三个边:上,下,左。而|>总体来看,向右三角形的高=上+下边框的长度。宽=左边框的长度*/
        div.arrow-right {
            width: 0px;
            height: 0px;
            border-top: 30px solid transparent;
            border-bottom: 30px solid transparent;
            border-left: 60px solid black;
            font-size: 0px;
            line-height: 0px;
        }
    </style>
 
 
    <div class="back">
        <div class="arrow-up"></div>
        <div class="arrow-down"></div>
        <hr />
        <div class="arrow-left"></div>
        <div class="arrow-right"></div>
    </div>
 
 
 
 
     <style type="text/css">
        /*气泡 效果样式控制
           支持IE8 以上版本
            */
        div.tooltip {
            /*tooltip content*/
            background: #eee;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0px 5px 10px rgba(255,0,255,0.5);
            position: relative;
            width: 200px;
            margin-left: 50px;
            margin-top: 50px;
        }
            /*背景  在上面*/
            div.tooltip:after {
                position: absolute;
                display: inline-block;
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-right: 10px solid red;
                left: -10px;
                top: 20px;
                content: '';
            }
            /*箭头-:before and  after,
            一起组成了好看的气泡小箭
            ----在下面
            */
            div.tooltip:before {
                position: absolute;
                display: inline-block;
                border-top: 20px solid transparent;
                border-right: 20px solid green;
                border-bottom: 20px solid transparent;
                left: -20px;
                top: 10px;
                content: '';
            }
    </style>
    <div class="backTwo">
 
        <div class="tooltip">
            向左的箭头: 只有三个边:上、下、右。
            <br />而 < | 总体来看,向左三角形的高=上+下边框的长度。 宽=右边框的长度
            <br />
            <br />
            向右的箭头: 只有三个边:上、下、左。
            <br />而 |> 总体来看,向右三角形的高=上+下边框的长度。 宽=左边框的长度
        </div>
 
    </div>