简单的左上角显示“X”号,html和css代码


需求:原生js在一个div右上角搞一个“x”号,可以删除这个div,网上找的都不是很满意,找的过程中发现网站的广告弹框的“X”号效果可以,就窃取过来了,先留着,以后说不定能用到:
效果图就像这样
 

 

 

<div class='member-item'>
                <svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 15 15"><path d="M3.25,3.25l8.5,8.5M11.75,3.25l-8.5,8.5"></path></svg>
                    <img class="medium-avatar img-circle" src="${headPath}"/>
                    <p class="real-name">${xss(peer.name)}</p>
      </div>
 
.member-item {
    display: block;
    width: 115px;
    height: 120px;
    position: relative;
    top:20px;
}
 
.member-item  svg{
    position: absolute;
    top: 0;
    right: 0;
    height: 15px;
    width: 15px;
    stroke: #00aecd;
    stroke-width: 1.25;
    cursor:pointer;
}


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM