css箭头例子 上下左右箭头

 

 

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>css arrow</title>
</head>
<style>
    .content{
        margin: auto 20%;
        padding:  10px 20px;
    }

    .box {    
        background-color: #fff ;
        width: 300px;
        height: 100px;
        border: 1px solid #ccc;
        position:relative;
        text-align: center;
        margin-bottom:  20px;        
        line-height: 20px;
    }
    .box span {
        margin-top:  40px;
        display: inline-block;
    }

    .box .arrow{
        width: 0;
        height: 0; 
        position:absolute;
        border-style:solid;
        border-width:10px;      
        font-size: 0;
        line-height: 0;
        z-index: 8;
    }
    .box .arrow-inner{
        width: 0;
        height: 0; 
        position:absolute;
        border-style:solid;
        border-width:10px;      
        z-index: 9;
        font-size: 0;
        line-height: 0;
    }
    

    /** 向下 */
    .arrow-bottom{
        border-color:#ccc transparent transparent;
        bottom:-20px;
        right:40%;
    }
    .i-bottom{
        border-color:#fff transparent transparent;
        bottom:-19px;
        right:40%;
    }

    /**向右*/
    .arrow-right{
        border-color:transparent  transparent transparent #ccc;
        right : -20px;
        top:40%;
    }
    .i-right{
        border-color:transparent  transparent transparent #fff;
        right:-19px;
        top:40%;
    }

    /**向上*/
    .arrow-top{
        border-color:transparent transparent #ccc transparent ;
        top : -20px;
        left:40%;
    }
    .i-top{
        border-color:transparent transparent #fff transparent ;
        top: -19px;
        left:40%;
    }

    /**向左*/
    .arrow-left{
        border-color:transparent #ccc  transparent transparent ;
        left : -20px;
        top:49%;
    }
    .i-left{
        border-color:transparent  #fff transparent transparent ;
        left: -19px;
        top:49%;
    }
    
</style>
<body>
    <div class="content">
            <div class="box">
                <span>向下箭头</span>
                <div>
                    <i class="arrow arrow-bottom"></i>
                    <i class="arrow-inner i-bottom"></i>
                </div>
            </div>
            <div class="box">
                <span>向右箭头</span>
                <div>
                    <i class="arrow arrow-right"></i>
                    <i class="arrow-inner i-right"></i>
                </div>
            </div>
            <div class="box">
                <span>向上箭头</span>
                <div>
                    <i class="arrow arrow-top"></i>
                    <i class="arrow-inner i-top"></i>
                </div>
            </div>
            <div class="box ">
                <span>向左箭头</span>
                <div>
                    <i class="arrow arrow-left"></i>
                    <i class="arrow-inner i-left"></i>
                </div>
            </div>
    </div>
    

</body>
</html>

 

posted @ 2015-06-03 10:31  Shimily  阅读(506)  评论(0)    收藏  举报