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

Dear 丶 2022-06-06 02:11 161阅读 0赞

##### 前言：今天上课的时候老师提到了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; }

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

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

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

#### 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; }

就会出现下面这种情况  
![SouthEast 2][]  
如果我们想要实现一个三角形效果，那么直接把其他边的颜色设置为背景色就可以了

.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; }

效果图  
![SouthEast 3][]  
三角形实现完成  
同理，如果我们想实现一个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; }

效果如下：  
![SouthEast 4][]

#### 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>

移动上去实现的效果如下  
![SouthEast 5][]  
我们把上面的代码进行优化，加上一些动画效果以及做一些阴影  
代码如下：

<!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>

实现效果图  
![SouthEast 6][]

[SouthEast]: /images/20220606/11f3c6a3e86442c59d5055efa9b00634.png
[SouthEast 1]: /images/20220606/e91d54e890a345598cde24321beb1d3e.png
[SouthEast 2]: /images/20220606/03cb3bb5012a46f99d9e6d723b94b226.png
[SouthEast 3]: /images/20220606/035cac3232634034a90b926e8e0d56c4.png
[200px]: /images/20220606/fc1b5212bb4c4863ac41c800738d0063.png
[SouthEast 4]: /images/20220606/52766eb47a5943bbbc14671d891f0fbb.png
[SouthEast 5]: /images/20220606/5caf47dea64e4009b7faf4e3c17db1e7.png
[SouthEast 6]: /images/20220606/0da68f3dab2e49d1b9efd39d59f95f61.png