CSS小鲨鱼

280行纯CSS，喜欢拿走

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

GVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTgyMDQ0NA==,size_16,color_FFFFFF,t_70#pic_center)

<!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>