这个问题也是我在自学前端的时候，练习模仿淘宝商城页面出现的，淘宝商城登录页面如下：
可以看到右上角有一个切了角度的二维码标志。
首先我找了张二维码图片，并把他做成绝对定位后，保持在父盒子的右上角
.barcode img {
position:absolute;
top:0;
right:0;
width:60px;
height:60px;
}
这样写完后大致的效果是这样：\
接着我想要模仿淘宝的右上角切角二维码，我查了很多资料发现了一种方法是使用
background-img里的linear-gradient属性，但是这个方法只能设置纯色盒子的切割，不能用于img元素上。
后来我查阅资料发现css3中有一个clip-path属性，意思是按照路径切割，保留坐标区域内部的图案。
其中clip-path:polygon()意思是按照多边形进行切割，里面可以多对坐标，多对坐标围城的路径就是要保留的部分。
在二维码案例中，可以如下设置，就是第一个位置是（0,0）也就是左上角，第二个是（100%，0）也就是右上角,第三个是(100%,100%)也就是右下角，作用就是只保留左上角、右上角和右下角的部分，其余部分舍弃。
.barcode img {
position:absolute;
top:0;
right:0;
width:60px;
height:60px;
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
然后登录页面的二维码就大功告成了！
同理，右上角的“扫码登录更安全”这个盒子是不规则形状，同样也可以用
首先把盒子的位置摆好：
.barcodeTips {
position: absolute;
width: 130px;
height: 25px;
font-size: 10px;
background-color:#fffbed;
color: #d19b5b;
line-height: 25px;
top: 10px;
right: 45px;
}
之后加入切割
.barcodeTips {
position: absolute;
width: 130px;
height: 25px;
font-size: 10px;
background-color:#fffbed;
color: #d19b5b;
line-height: 25px;
clip-path: polygon(0 0, 95% 0, 95% 35%, 100% 50%, 95% 75%,95% 100%,0 100%);
top: 10px;
right: 45px;
}
