CSS小鲨鱼_我不是费圆

irpas 02-07 6793

280行纯CSS，喜欢拿走

? 无论是css还是别的，前端的学习总是妙趣横生，只要思想在不断进步，技术就会一次次的突破。如果你学习过CSS，你会更加了解这段代码的神奇，送给你，远道而来的求学者。

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; box-sizing: border-box; } html { width: 100%; height: 100%; } body { width: 100%; height: 100%; background-color: #2b7dfd; } .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 500px; } .polygon:nth-child(1) { position: absolute; top: 50px; left: 250px; background-color: #000000; width: 120px; height: 60px; clip-path: polygon(0 0, 100% 60%, 60% 100%, 0 60%); } .polygon:nth-child(2) { position: absolute; top: 86px; left: 298px; background-color: #242424; width: 120px; height: 60px; clip-path: polygon(50% 100%, 100% 100%, 60% 0%, 20% 40%); } .polygon:nth-child(3) { clip-path: polygon(30% 100%, 100% 100%, 72% 40%, 15% 0); position: absolute; top: 86px; left: 230px; background-color: white; width: 130px; height: 60px; } .polygon:nth-child(4) { clip-path: polygon(20% 100%, 60% 60%, 60% 0, 0 60%); position: absolute; top: 50px; left: 173px; background-color: #444444; width: 130px; height: 60px; } .polygon:nth-child(5) { clip-path: polygon(50% 0, 65% 100%, 10% 40%); position: absolute; top: 86px; left: 186px; background-color: #eeeeee; width: 130px; height: 60px; } .polygon:nth-child(6) { clip-path: polygon(0% 90%, 44% 0%, 64% 50%, 41% 100%); position: absolute; top: 85px; left: 116px; background-color: #242424; width: 130px; height: 50px; } .polygon:nth-child(7) { clip-path: polygon(56% 96%, 100% 40%, 55% 0); position: absolute; top: 54px; left: 44px; background-color: black; width: 130px; height: 78px; } .polygon:nth-child(8) { clip-path: polygon(95% 100%, 95% 50%, 30% 30%); position: absolute; top: -21.5px; left: -7px; background-color: #444444; width: 130px; height: 152px; } .polygon:nth-child(9) { clip-path: polygon(100% 45%, 29% 0, 0 30%); position: absolute; top: 110px; left: 170px; background-color: black; width: 100px; height: 80px; } .polygon:nth-child(10) { clip-path: polygon(50% 0, 0 95%, 80% 100%, 100% 5%); position: absolute; top: 128px; left: 62px; background-color: rgb(53, 53, 53); width: 110px; height: 110px; } .polygon:nth-child(11) { clip-path: polygon(20% 0, 82% 7%, 80% 40%, 20% 100%); position: absolute; top: 230px; left: 34.5px; background-color: black; width: 140px; height: 110px; } .polygon:nth-child(12) { clip-path: polygon(15% 60%, 75% 0%, 67% 60%); position: absolute; top: 274px; left: 40px; background-color: rgb(44, 44, 44); width: 142px; height: 111px; } .polygon:nth-child(13) { clip-path: polygon(0 0, 48% 0, 100% 100%, 70% 100%); position: absolute; top: 340px; left: 62px; background-color: rgb(19, 19, 19); width: 140px; height: 110px; } .polygon:nth-child(14) { clip-path: polygon(20% 0, 55% 0, 55% 35%, 0% 100%); position: absolute; top: 448px; left: 135px; background-color: black; width: 120px; height: 90px; } .polygon:nth-child(15) { clip-path: polygon(10% 40%, 90% 40%, 20% 85%, 0% 65%); position: absolute; top: 390px; left: 200px; background-color: black; width: 130px; height: 90px; } .polygon:nth-child(16) { clip-path: polygon(35% 0, 65% 78%, 55% 100%, 0% 0); position: absolute; top: 340px; left: 129px; background-color: rgb(31, 30, 30); width: 130px; height: 110px; } .polygon:nth-child(17) { clip-path: polygon(40% 0%, 85% 0, 75% 100%, 12% 100%, 35% 35%); position: absolute; top: 238px; left: 120px; background-color: white; width: 73px; height: 103px; } .polygon:nth-child(18) { clip-path: polygon(25% 0, 81% 12%, 32% 100%, 14% 100%); position: absolute; top: 133px; left: 125px; background-color: black; width: 178px; height: 105px; } .polygon:nth-child(19) { clip-path: polygon(15% 0, 100% 0, 28% 32%); position: absolute; top: 145px; left: 241px; background-color: rgb(230, 227, 227); width: 178px; height: 105px; } .polygon:nth-child(21) { clip-path: polygon(5% 51%, 70% 7%, 89% 22%, 0% 100%); position: absolute; top: 131.5px; left: 174px; background-color: rgb(209, 208, 208); width: 135px; height: 210px; } .polygon:nth-child(22) { clip-path: polygon(0% 35%, 35% 0%, 100% 100%, 25% 80%); position: absolute; top: 207px; left: 179px; background-color: black; width: 90px; height: 90px; } .polygon:nth-child(20) { clip-path: polygon(0% 38%, 54% 0%, 86% 100%); position: absolute; top: 185px; left: 230px; background-color: black; width: 90px; height: 90px; } .polygon:nth-child(24) { position: absolute; top: 106px; left: 300px; background-color: black; width: 8px; height: 8px; border-radius: 4px; z-index: 3; } .polygon:nth-child(26) { position: absolute; top: 100px; left: 302px; width: 0px; height: 0px; border:10px solid; border-radius:10px; border-color:transparent transparent transparent blue; } </style> </head> <body> <div class="container"> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> <div class="polygon"></div> </div> </body> </html> 本人已入驻CSDN近两年，所有作品都是开源，也从不在文章上设置“粉丝可读、VIP可读、付费可读”，但一直没有什么人气

??如果你觉得我的代码还算有趣，在你的学习中能有所帮助，请查看我的置顶文章，我由衷感谢！?前端的学习不是一蹴而就，不积跬步无以至千里，不积小流无以成江海。持续不断的努力才能让你我有所收获，专业的知识还得到机构去学习，培训机构的设立有其存在的必然性，你钱花对了吗？