代码来自头条号"前端小智", 侵权删
<!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> *{ margin: 0; padding: 0; box-sizing: border-box; } section{ position: relative; width: 100%; height: 100vh; background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F035%2F063%2F726%2F3ea4031f045945e1843ae5156749d64c.jpg&refer=http%3A%2F%2Fyouimg1.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622294525&t=8b61f04b0c64b3f14a66f1fbfa4c7aa4") no-repeat; /*url*/ background-size: cover; display: flex; justify-content: center; align-items: center; border-left: 50px #fff solid; border-right: 50px #fff solid; } h2{ color: #fff; font-size: 6em; text-align: center; } section::before{ 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.66%, transparent 66.66%), linear-gradient(45deg, transparent 33.33%, #fff 33.33%, #fff 66.66%, transparent 66.66%); /*-45 是从左下角到右上角 45是右下角到左上角 通过突变 通明+色彩 将矩形切成三角形 heigh是整个矩形的高 baccground-size能够扭转三角的大小 倡议查问一下突变本人试试*/ background-size: 30px 60px; } section::after{ 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%), linear-gradient(45deg, transparent 33.33%, #fff 33.33%, #fff 66.66%, transparent 66.66%); background-size: 30px 60px; transform: rotate(180deg); } </style></head><body> <section> <h2>zig zag border</h2> </section></body></html>