效果图:
实现分析:
实现该效果时是将一个空的div进行切图然后定位到右上角,类似于遮罩的效果。
JS代码:
<div class="loginBox">
<div class="icon">
<i class="fa fa-tv fa-3x"></i>
<div class="iconDiv"></div>
</div>
CSS代码:
.loginBox {
background-color: white;
display: flex;
justify-content: space-around;
align-items: center;
position: absolute;
top: 20%;
right: 10%;
position: relative;
width: 350px;
height: 350px;
padding-bottom: 50px;
.icon{
i{
width:52px ;
height: 52px;
position: absolute;
top: 0px;
right: 0px;
color: #ff4400;
}
.iconDiv{
border-top: 30px solid transparent;
border-right: 30px solid transparent;
border-left: 30px solid #fff;
border-bottom: 30px solid #fff;
box-sizing: border-box;
position: absolute;
top: 0px;
right: 0px;
}
}
需要将icon图标的左下角遮住,所以需要将空div的左边框和下边框显现出来,上边框和有边框设置为transparent透明。