实现锯齿边框的糖纸
先创建个容器,作为糖纸的主体
<body>
<!-- 糖纸 -->
<section></section>
</body>
接下来就是 CSS 部分了。
设置下糖纸的宽高,再让它居中一下。后面子元素要用到绝对定位,所以先加上相对定位。
section {
position: relative;
width: 400px;
height: 200px;
margin: 100px auto;
}
我们得给糖纸加个靓一点的背景图
section {
/* 背景图和渐变的滤镜 */
background: url(../img/bg.jpeg) no-repeat,
linear-gradient(45deg, #ff3479, #ffc107);
/* 设置背景图的融合方式 */
background-blend-mode: soft-light;
/* 背景图尺寸和定位 */
background-size: cover;
background-position: center;
}
看下效果。
嗯。。。这糖看起来会很酸
好了现在到重点的地方了——锯齿边框。
用 CSS 伪元素的方式给糖纸添加边框
/* 上边框 */
section::before {
content:'';
/* 定位到左上角 */
position: absolute;
top: 0;
left: 0;
/* 宽度设置与父元素相等,再设置一个高度 */
width: 100%;
height: 20px;
display: block;
}
锯齿是显示一格空一格,我们可以利用 CSS 渐变来实现
section::before {
/*
1、透明一格,再用白色覆盖一格。并让它X轴方向平铺
2、渐变方向设置成45°
3、设置背景的大小
*/
background: linear-gradient(45deg, transparent 33.33%, #fff 33.33%, #fff 66.66%, transparent 66.66%) repeat-x;
background-size: 20px 40px;
}
再加上一个-45°的渐变,让它形成小三角形(锯齿状)。
section::before {
background: linear-gradient(45deg, transparent 33.33%, #fff 33.33%, #fff 66.66%, transparent 66.66%) repeat-x,
linear-gradient(-45deg, transparent 33.33%, #fff 33.33%, #fff 66.66%, transparent 66.66%) repeat-x;
}
伪元素整体旋转180°,让锯齿向外。
section::before {
transform: rotate(180deg);
}
Nice! 上边框完成!
接着是下边框。
其实下边框也是一样的方法。我们只需要再添加个伪元素,把它定位到底部;
下面的锯齿默认就是朝下的,所以就不需要旋转伪元素了。
section::after {
content:'';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 20px;
display: block;
background: linear-gradient(45deg, transparent 33.33%, #fff 33.33%, #fff 66.666%, transparent 66.666%) repeat-x,
linear-gradient(-45deg, transparent 33.33%, #fff 33.33%, #fff 66.666%, transparent 66.666%) repeat-x;
background-size: 20px 40px;
}
最终效果:
以下为源码:
HTML 部分
<!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>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- 糖纸 -->
<section></section>
</body>
</html>
CSS 部分
/* 简单重置一下默认样式 */
* { margin: 0; padding: 0;}
/*** 糖纸样式 ***/
section {
position: relative;
width: 600px;
height: 400px;
margin: 100px auto;
background: url(../img/bg.jpeg) no-repeat,
linear-gradient(45deg, #ff3479, #ffc107);
background-blend-mode: soft-light;
background-size: cover;
background-position: center;
}
/*** 上边框 ***/
section::before {
content:'';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 20px;
display: block;
background: linear-gradient(45deg, transparent 33.33%, #fff 33.33%, #fff 66.66%, transparent 66.66%) repeat-x,
linear-gradient(-45deg, transparent 33.33%, #fff 33.33%, #fff 66.66%, transparent 66.66%) repeat-x;
background-size: 20px 40px;
transform: rotate(180deg);
}
/*** 下边框 ***/
section::after {
content:'';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 20px;
display: block;
background: linear-gradient(45deg, transparent 33.33%, #fff 33.33%, #fff 66.666%, transparent 66.666%),
linear-gradient(-45deg, transparent 33.33%, #fff 33.33%, #fff 66.666%, transparent 66.666%);
background-size: 20px 40px;
}
第一次发博客,欢迎指正!