logo
DeveloperAg
banner
NEWS LETTER

实现锯齿边框的糖纸

Scroll down

实现锯齿边框的糖纸

先创建个容器，作为糖纸的主体

1
2
3
4
<body>
  <!-- 糖纸 -->
  <section></section>
</body>

接下来就是 CSS 部分了。

设置下糖纸的宽高，再让它居中一下。后面子元素要用到绝对定位，所以先加上相对定位。

1
2
3
4
5
6
section {
  position: relative;
  width: 400px;
  height: 200px;
  margin: 100px auto;
}

我们得给糖纸加个靓一点的背景图

1
2
3
4
5
6
7
8
9
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 伪元素的方式给糖纸添加边框

1
2
3
4
5
6
7
8
9
10
11
12
/* 上边框 */
section::before {
  content: "";
  /* 定位到左上角 */
  position: absolute;
  top: 0;
  left: 0;
  /* 宽度设置与父元素相等,再设置一个高度 */
  width: 100%;
  height: 20px;
  display: block;
}

锯齿是显示一格空一格，我们可以利用 CSS 渐变来实现

1
2
3
4
5
6
7
8
9
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° 的渐变，让它形成小三角形（锯齿状）。

1
2
3
4
5
6
7
8
9
10
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°，让锯齿向外。

1
2
3
section::before {
  transform: rotate(180deg);
}

在这里插入图片描述
Nice! 上边框完成！

接着是下边框。

其实下边框也是一样的方法。我们只需要再添加个伪元素，把它定位到底部；
下面的锯齿默认就是朝下的，所以就不需要旋转伪元素了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/* 简单重置一下默认样式 */
* {
  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;
}

完毕

其他文章
cover
处理canvas使用外部字体，外部字体加载不及时
  • 23/06/26
  • 10:04
  • 前端
请输入关键词进行搜索
  • to close