css3锯子边 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jagged border - top</title> <style type="text/css"> body { background: #3B4C5C; padding: 100px; } .jagged-border { position: relative; width: 100%; height: 50px; -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 2px); filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 2px); } .jagged-border:before { content: ""; display: block; position: absolute; top: -10px; width: 100%; height: 10px; } .lightgray-bg { background: #ECF0F1; } .lightgray-bg:before { background: -webkit-linear-gradient(45deg, transparent 33.333%, #ECF0F1 33.333%, #ECF0F1 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #ECF0F1 33.333%, #ECF0F1 66.667%, transparent 66.667%); background: linear-gradient(45deg, transparent 33.333%, #ECF0F1 33.333%, #ECF0F1 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #ECF0F1 33.333%, #ECF0F1 66.667%, transparent 66.667%); background-size: 20px 40px; } .white-bg { background: #FFF; } .white-bg:before { background: -webkit-linear-gradient(45deg, transparent 33.333%, #fff 33.333%, #fff 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #fff 33.333%, #fff 66.667%, transparent 66.667%); background: linear-gradient(45deg, transparent 33.333%, #fff 33.333%, #fff 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #fff 33.333%, #fff 66.667%, transparent 66.667%); background-size: 20px 40px; } .darkgray-bg { background: #C3C9CC; } .darkgray-bg:before { background: -webkit-linear-gradient(45deg, transparent 33.333%, #C3C9CC 33.333%, #C3C9CC 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #C3C9CC 33.333%, #C3C9CC 66.667%, transparent 66.667%); background: linear-gradient(45deg, transparent 33.333%, #C3C9CC 33.333%, #C3C9CC 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #C3C9CC 33.333%, #C3C9CC 66.667%, transparent 66.667%); background-size: 20px 40px; } </style> </head> <body> <div class="jagged-wrap-inner"> <div class="offset"></div> <div class="lightgray-bg jagged-border"></div> <div class="white-bg jagged-border"></div> <div class="darkgray-bg jagged-border"></div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » css3锯子边