如图，鼠标移动到图上，实现右上角翻页的效果，本例主要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>