这个特效大家可以自己去改变其中的值去看看有什么变化，原理起始我也不是很懂，只知道用
效果展示：
- hover前：
<style>
.page{
background: pink;
width: 120px;
height: 120px;
}
.content {
width: 120px;
height: 120px;
margin: 40px auto 0;
position: relative;
cursor: pointer;
}
.content:before {
content: '';
position: absolute;
top: 0;
right: 0;
border: 0px solid;
border-color: rgba(0, 0, 0, 0.2) #fff ;
transition: border .5s ease;
}
.content:hover:before {
border-right-width: 50px;
border-bottom-width: 50px;
}
</style>
</head>
<body>
<div class="content" id="content">
<div class="page"></div>
</div>
</body>
</html>
来源：CSDN
作者：前端小峰
链接：https://blog.csdn.net/Shaoyouiqng/article/details/104064556