demo 点击出现二维码

<style>
    /*css reset*/
    body{
        padding:0;
        margin:0;
    }
    a{
        text-decoration:none;
        color:#333;
    }
    img{
		vertical-align:middle;
	}
    /*样式*/
    .phone{
        position:relative;
        margin-left:300px;
    }
    .phone>span{
        font-size:12px;
    }
    .phone .code{
        position:absolute;
        border:1px solid #eaeaea;
        top:30px;
        /*先重置位置*/
        left:0;
        transform:translate(-50%);
        margin-left:50%;
        
        /*根据元素大小调整*/
        /*向左移动img的一半,向右移动父元素的一半*/
        padding:5px 5px 0;
    }
    .phone .code span{
        display:block;
        text-align:center;
        margin-top:3px;
        font-size:14px;/*字体不同可能会变大微软雅黑比较大*/
    }
    .arrow{
        position:absolute;
        top:-7px;

        left:0;
        right:0;
        margin:0 auto;
        
        5px;
        height:5px;
        background:#fff;
        border-top:1px solid #aaa;
        border-left:1px solid #aaa;
        transform:rotate(45deg);
        
        
    }
    
</style>
<a class="phone" href="#">
    <span>手机考拉</span>
    <span class="code">
        <span class="arrow"></span>
        <img src="二维码图片地址"/>
        <span>下载APP</span>
        <span>领1000元新人礼包</span>
    </span>
</a>