登录页面右上角切换二维码

右上角切角图片 鼠标悬停时显示完整图标及二维码

直接css实现切角图片，不需要修改图片

效果图 

 

 

 右上角图标优化 ///优化代码看注释

---

实现思路 

搜了很多实现方法都是直接修改图片，感觉搞两张图太麻烦了所以想直接使用css实现

思路1：将div切成三角形，然后使用overflow使图片只显示三角形，找到两种方法

通过border画三角形 尝试后发现无法放图片

CSS3三角形图片展示 有看没有懂所以失败了

思路2：将需要切角的图片放在背景层，上方放置与底色相同的块遮挡背景图片从而实现切角效果

实现代码

外层需设置overflow:hidden 

html

<div class="form">
    <div class="trans" onmousemove="$('.code').show();$('.imgApp').hide();" onmouseout="$('.code').hide();$('.imgApp').show();">
        <div class="imgApp"></div> //白色三角形块遮挡图片
    </div>
    <div class="code">
        <img alt="Scan me!" src="二维码地址" width="200" height="200">
    </div>
    登录框代码
</div>

css 

.trans {
    position: absolute;
    right: 0;
    width: 64px;
    height: 64px;
    background-image: url(右上角图片地址);
    background-color: #2b96e6; //图标优化 -- 换为白色线条图标 背景层添加背景色
}
.imgApp {
    width: 64px;
    height: 64px;
    background: linear-gradient(225deg,transparent 45px, #fff 0);
}
.code{
    width: 100%;
    height: 100%; //将登录框挤出显示区域
    text-align: center;
    display: none;
}
.code img{
    margin-top: 80px;
}

参考链接

CSS3实现三种切角效果https://blog.csdn.net/qq_37029814/article/details/82594414