前言:今天上课的时候老师提到了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;
}
实现的效果如下:
如果我们想实现一个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>
实现效果图