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

最新推荐文章于 2022-10-09 17:09:27 发布

输出是最好的学习

最新推荐文章于 2022-10-09 17:09:27 发布

阅读量537

点赞数

分类专栏：前端文章标签：翻页折叠纸张卷角 border

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.csdn.net/m0_37568521/article/details/78361998

版权

前端专栏收录该内容

72 篇文章 1 订阅

订阅专栏

前言：今天上课的时候老师提到了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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
border的那些事儿，使用border实现翻页折叠

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

扫一扫

专栏目录