使用CSS实现锯齿形边框的示例代码

ID:16011 / 打印

前言

不知道大伙有没有见过下面这种效果。

没错，这回给大伙带来的是一个锯齿形边框，类似于传统邮票的边框，有一圈锯齿形状，具体效果可参考下面的图片。其实看到这种效果，相信很多人第一反应是采用伪元素的方式添加小三角形来实现锯齿状，确实是这样的，下面就带大家来实现它。

效果预览

结构构建

HTML这一部分很简单，使用html5标签section包裹内容即可。

 <section>       <h2>Border</h2>  </section>

section的作用是创建一个区块，通常用于组织和包容相关的内容，可以添加其他内容或样式来补充、装饰或定义该section区块的特性。

总的来说就是我们创建了一个section区块，其中包含了一个标题Border的二级标题。这个section可以用于组织相关的内容，并根据需要进行进一步的样式和布局设置。

样式设计

CSS部分主要在section标签上做文章，我们先来定义section元素的样式。

section{     position: relative;     width: 100%;     height: 100%;     background: url(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6894176262634e7ca3e4dc2d9c6f4735~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1920&h=1080&s=433827&e=jpg&b=034681),linear-gradient(45deg,#ff3479,#0319f4);     background-blend-mode: soft-light;     background-size: cover;     background-position: center;     display: flex;     align-items: center;     justify-content: center;     border-left: 50px solid #fff;     border-right: 50px solid #fff; }

我们将section元素定义为一个占满父元素、具有白色实线边框的容器。这个容器使用弹性布局，将子项在水平和垂直方向上都居中对齐。通过设置背景属性，可以添加自定义的背景样式，例如背景图片、背景混合模式等等。

background-blend-mode: soft-light是用于设置背景的混合模式为 soft-light，这是一种混合模式用于调整背景与内容之间的颜色和明暗关系。

接下来就是最关键的部分了，利用伪元素实现锯齿状。

section::before{     content: '';     position: absolute;     bottom: 0;     left: 0;     width: 100%;     height: 40px;     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: 30px 60px; }

section::after{    ......     top: 0;     left: 0;    ......     transform: rotate(180deg); }

这两段大部分内容是相同的，因此在这里我将由区别的部分拿出来讲一下。利用用::before和::after伪元素为section元素添加了棋盘状背景图案。通过两个线性渐变，其中透明色和白色的比例按照百分比来控制，创建出棋盘图案的效果。这样的样式可以用于装饰section元素，增加视觉效果和细节来提升整体的外观。

对于两者有区别的部分，top: 0和left: 0将伪元素相对于父元素的顶部和左侧边缘进行定位；bottom: 0和left: 0将伪元素相对于父元素的底部和左侧边缘进行定位。可以理解为两者将四边都占满了。transform: rotate(180deg)对伪元素应用旋转变换，将其旋转180度，即使它成为 <section> 元素背景的顶部。可以理解为默认为底部，通过转换之后变成顶部。

完整代码

html：

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <link rel="stylesheet" href="./index.css"> </head> <body>     <section>         <h2>Border</h2>     </section> </body> </html>

css：

*{     margin: 0;     padding: 0;     box-sizing: border-box; } section{     position: relative;     width: 100%;     height: 100%;     background: url(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6894176262634e7ca3e4dc2d9c6f4735~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1920&h=1080&s=433827&e=jpg&b=034681),linear-gradient(45deg,#ff3479,#0319f4);     background-blend-mode: soft-light;     background-size: cover;     background-position: center;     display: flex;     align-items: center;     justify-content: center;     border-left: 50px solid #fff;     border-right: 50px solid #fff; } section h2{     color: #fff;     font-size: 20em;     text-align: center; } section::before{     content: '';     position: absolute;     bottom: 0;     left: 0;     width: 100%;     height: 40px;     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: 30px 60px; } section::after{     content: '';     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 40px;     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: 30px 60px;     transform: rotate(180deg); }