border的那些事儿，使用border实现翻页折叠

来源：互联网发布：淘宝客服的提成怎么算编辑：程序博客网时间：2024/06/05 06:23

前言：今天上课的时候老师提到了border的四个边其实是四个梯形。其实这个在之前的时候自己在使用input的时候，出现输入内容位置变动的时候就发现了，所以没有太在意。但是突然同桌对我说，使用border可以实现翻页折叠的效果。这个就马上引起我的兴趣，下课以后马上搜索，发现的确是可以很轻松的使用，在这里进行简单的分享

1、设border的那些事儿

我们平时在使用的border的时候，很多情况都是下面这样

border: 1px solid gray;

或者

border-bottom: 1px solid gray;

在上面这种使用，我们是不会在意每一条边是梯形还是矩形，因为对于1个像素或者几个像素来说，根本就看不出来。但是当我们将边框方法以后，我们就可以发现了，如下

.content {    width: 400px;    height: 400px;    border-top: 100px solid red;    border-left:100px solid black;    border-bottom:100px solid purple;    border-right: 100px solid gray;}

我们看到的效果图是下面这样的

其实这种结果也可以想得到的，如果每个边框都是一个矩形，那么肯定是会出现重叠的，最后到底显示那个方向的颜色呢？所以设计者就直接使用矩形了。
通过上面这个的发现，如果我们将左边框和上边框拿掉，那么结果是怎样的呢？

.content {    width: 200px;    height: 200px;    background: red;    border-bottom:100px solid purple;    border-right: 100px solid gray;}

实现效果如下

通过测试，我们可以发现，如果会出现同时角落冲突的时候，那么就把角落平分，每个边各占一个小三角形。如果不会出现角落冲突，那么就直接全部占领。所以如果我们只是设置一条边的边框，那么就是一个矩形了。

2、通过border实现三角形

通过上面的发现，其实可以实现很多效果，不过今天的主题是实现翻页折叠，所以就来介绍一下怎么实现三角形效果。
当我们把上面的div的宽度和高度都设置为0的时候

.content {    width: 0;    height: 0;    border-top: 100px solid red;    border-left:100px solid black;    border-bottom:100px solid purple;    border-right: 100px solid gray;}

就会出现下面这种情况

如果我们想要实现一个三角形效果，那么直接把其他边的颜色设置为背景色就可以了

.content {    width: 0;    height: 0;    border-top: 100px solid white;    border-left:100px solid white;    border-bottom:100px solid white;    border-right: 100px solid gray;}

效果图

三角形实现完成
同理，如果我们想实现一个div只是由两个三角形构成。我们可以这样写代码

.content {    width: 0;    height: 0;    border-bottom:100px solid purple;    border-right: 100px solid gray;    margin: 50px auto;}

实现的效果如下：
200px
如果我们想实现一个div是由一个三角形和梯形构成，那么我们可以通过这篇文章的第二张图知道，当我们把高度设置为0的时候，那么就实现了这样的效果，代码如下：

.content {    width: 200px;    height: 0;    border-right: 100px solid gray;    border-bottom:100px solid purple;}

效果如下：

3、通过border实现翻页折叠效果

实现原理，外面一个div作为一个容器，定位设置为相对定位。里面放一个图片或者内容，再放一个div设置为绝对定位（定位在右下角，border-left设置为我们需要显示的翻页折叠的颜色，border-bottom设置为背景颜色）。通过hover，我们改变设置为绝对定位的div的border-left和border-bottom的宽度，那么就完成了最简单的翻页折叠效果。
完整代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>welcome</title>    <style type="text/css">        .content {            position: relative;            width: 660px;            text-align: center;            margin: 50px auto;            padding: 20px 30px 20px 30px;            background: #cdcdcd;        }        img {            width: 100%;        }        .angel {            position: absolute;            bottom:0;            right: 0;            border-left:0 solid gray;            border-bottom:0 solid #cdcdcd;        }        .content:hover .angel{            border-left-width:160px;            border-bottom-width:160px;        }    </style></head><body><div class="content">    <div class="angel"></div>    <img src="1.jpg" alt="" /></div></body></html>

移动上去实现的效果如下

我们把上面的代码进行优化，加上一些动画效果以及做一些阴影
代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>welcome</title>    <style type="text/css">        .content {            position: relative;            width: 660px;            text-align: center;            margin: 50px auto;            padding: 20px 30px 20px 30px;            background: #cdcdcd;        }        img {            width: 100%;        }        .angel {            position: absolute;            bottom:0;            right: 0;            border-left:0 solid gray;            border-bottom:0 solid #cdcdcd;            box-shadow:-10px -10px 10px rgba(0 ,0,0,0.5) ;            transition: all 1s;        }        .content:hover .angel{            border-left-width:160px;            border-bottom-width:160px;        }    </style></head><body><div class="content">    <div class="angel"></div>    <img src="1.jpg" alt="" /></div><script></script></body></html>

实现效果图

阅读全文

0 0