1.分析效果
在我们想得到一个效果时,我们需要思考如何实现,而对于纸张折角这个效果来说,思路相对简单,先对对于现实折纸效果进行分析
纸张折角很简单:一张纸和一个角,在纸的四角将角内折,使一张纸某一角折叠,折进去的是一个三角形.
2.网页思路
网页中,我们先需要一个矩形作为纸张,再在它的角处实现折角效果.矩形缺失一个角(如图,蓝线为底边,虚红为两条边的白色三角)而形成的边内部有个以这个蓝色边为底的镜像三角形(如图棕色三角)
图1
3.实现
3.1边框css属性实现
css的边框属性可以给元素加边框,而当我们将元素宽高设为0而给边框四边一定宽度和颜色时,会出现由四个三角形组成的一个正方形
图2
代码如下:
.box1{
width: 0;
height: 0;
border-top: 25px solid red;/* 上三角*/
border-right: 25px solid black;/* 右三角*/
border-bottom: 25px solid blue;/* 下三角*/
border-left: 25px solid green ;/* 左三角*/
}
而要实现图1的效果也很简单,给一个浅棕色的盒子的右上角设一个边框四个三角组成的矩形,将矩形左三角和下三角设为深棕色 上三角与右三角设为白色
代码如下
<style>
.box{
position: relative;
margin: 100px auto 0;
width: 1000px;
height: 600px;
background-color: bisque;
}
.folding{
position: absolute;
top: 0;
right: 0;
border-top: 25px solid white;
border-right: 25px solid white;
border-bottom: 25px solid sienna;
border-left: 25px solid sienna ;
}
</style>
</head>
<body>
<div class="box">
<div class="folding"></div>
</div>
</body>
这样一个纸张折角效果就实现了
但这样做成的折角效果依旧存在问题,它不是真的"折角"了,而是靠一个与白色背景颜色一样的三角遮住了原本纸的颜色,如果背景颜色不是白色,那么它就不是折了角,而是把一角涂白了而已
图4
3.2彻底折角-线性渐变
在现实中折角后,那个角就不存在了,完全透明了,而我们3.1做的只是将角盖住,虽然网页是有效果的,但也是基于背景色和边框右上三角颜色一样而实现的,我们可以试下做得更好,彻底折角
线性渐变是一个很神奇的功能,在我们linear-gradient()中的()设为红蓝时,一个r星的logo背景的类似效果就出来了.但我们也能通过linear-gradient使矩形缺角
通过对linear-gradient设置角度与渐变位置就能实现斜着角度的对立的两个颜色,就像图4的有白三角与棕三角组成的的正方形一般从某种角度两色对立. 而随着我们在linear-gradient("角度","颜色","颜色")中的"颜色"后面中设置距离,我们就能使颜色所占的面积扩大,距离只要不大到占到对方的颜色,两色就会分离
如图:
代码如下
.box{
position: relative;
margin: 100px auto 0;
width: 1000px;
height: 600px;
background: linear-gradient(225deg, red 60px,bisque 60px);
}
而将一边颜色的距离设得够小且颜色设为透明后,一个缺一个角的矩形就出现了,那个角也彻底的被"折起来了"
如图:
随后,我们将边框做成的折后的角添加上去,一个真正的纸张折角就完成了
如图:
代码如下:
<style>
body{
/* width: 100%;
height: 100%; */
background-color: pink;
}
.box{
position: relative;
margin: 100px auto 0;
width: 1000px;
height: 600px;
/* background: linear-gradient(225deg, transparent 35px,bisque 1px); */
background: linear-gradient(225deg, transparent 35px,bisque 35px);
}
.folding{
position: absolute;
top: 0;
right: 0;
border-top: 25px solid transparent;/*上三角透明*/
border-right: 25px solid transparent;/*右三角透明*/
border-bottom: 25px solid sienna;
border-left: 25px solid sienna ;
}
</style>
</head>
<body>
<div class="box">
<div class="folding"></div>
</div>
</body>
3.3线性渐变:一个div一个css实现
在上面,这个页面通过了一个div模拟纸张,一个div模拟折角来实现这个效果,但能不能更近一步,一个div实现呢?
css的背景属性是可以设置两个图片的,而既然如此,在里面放两个渐变图似乎也是可行的. 如果一个渐变实现折了一角的纸张,另一个渐变实现被折的角的话,这个效果确实可以用一个div盒子和一个css实现了
那么这个折角是如何通过线性渐变实现呢,background属性可以设置图片的位置与大小,在我们设置完一个小角后在将其定位在左上角并设置大小后就可以得到一个小折角了(当然,记得设置不平铺呀!)
如图:
代码:
.box{
position: relative;
margin: 100px auto 0;
width: 1000px;
height: 600px;
background: linear-gradient(225deg, transparent 35px,sienna 35px)no-repeat top right/50px 50px;
随后,因为css的覆盖原因,将纸张渐变写在折角渐变下,即可完成一个div一个css实现纸张折角效果啦
如图:
整个代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>折纸效果</title>
<style>
body{
background-color: pink;
}
.box{
position: relative;
margin: 100px auto 0;
width: 1000px;
height: 600px;
background: linear-gradient(225deg, transparent 35px,sienna 35px)no-repeat top right/50px 50px,
linear-gradient(225deg, transparent 35px,bisque 35px)
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
