<!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>css之邮票锯齿</title> </head> <body> <div class="box"></div> </body> </html> <style> .box { position: relative; left: 10px; width: 220px; height: 220px; background-color: #ccc; } .box::before { content: ""; position: absolute; top: 0; display: block; width: 20px; height: 100%; background-size: 40px 20px; left: -20px; background-color: transparent; background-position: 100% 35%; background-image: linear-gradient(-45deg, #ccc 25%, transparent 25%, transparent), linear-gradient(-135deg, #ccc 25%, transparent 25%, transparent), linear-gradient(-45deg, transparent 75%, #ccc 75%), linear-gradient(-135deg, transparent 75%, #ccc 75%); } </style>
嗯,更多效果可以看看这篇文章:https://blog.51cto.com/u_15625450/5276173?articleABtest=0