如图，鼠标移动到图上，实现右上角翻页的效果，本例主要border边框的设置。
一、基本概念
<html>
<head>
<style>
#demo{
width:0;
height:0;
border:solid 50px;
border-top-color: #f00 ;
border-right-color: #ff0 ;
border-bottom-color:#0f0;
border-left-color:#00f;
}
</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>
当元素width和height为0，此时的边框呈现如上图所示，相邻的两条边框可以组成新的三角形。
所以我们的翻页效果就是，蓝绿组成新的三角形（颜色设为相同），红黄组成新的三角形（颜色设为相同），并且边框宽度逐渐由0变大的过程。
如果要实现翻页边框的长宽比，则要对边界线两边的边框单独设置，本例即要单独设置红蓝边框或者黄绿边框
<html>
<head>
<style>
#demo{
width:0;
height:0;
border:solid 50px;
border-top-color: #f00 ;
border-right-color: #ff0 ;
border-bottom-color:#0f0;
border-left-color:#00f;
border-width: 80px 80px 50px 50px;
}
</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>
这是对上/右边框设置的效果。
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-width效果</title>
<style type="text/css">
body {
background-color: #eaf0f2;
}
.paper-flip {
position: relative;
width: 500px;
height: 300px;
margin: 0 auto;
} /*image-layer*/
.image-layer {
width: 500px;
height: 300px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
} .image-layer img {
width: 500px;
cursor: pointer;
} .image-layer:before {
content: '';
position: absolute;
top: 0;
right: 0;
border-style: solid;
border-width: 0;
border-top-color: #fff ;
border-right-color: #fff;
border-bottom-color:rgba(0,0,0,0.5);
border-left-color:rgba(0,0,0,0.5);
border-radius: 0 0 0 4px;
box-shadow: 0 1px 1px rgba(0,0,0,0.5);
transition:all 0.4s ease-out;
} .image-layer:hover:before{
border-left-width:50px;
border-top-width:30px;
} </style>
</head>
<body>
<div class="paper-flip" id="paper-flip">
<div class="image-layer" id="image-layer">
<img src="http://p6.qhimg.com/d/inn/3f563406/table.jpg" alt="">
</div>
</div>
</body>
</html>