CSS小鲨鱼
时间:2022-07-25
本文章向大家介绍CSS小鲨鱼,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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可读、付费可读”,但一直没有什么人气 |
---|
如果你觉得我的代码还算有趣,在你的学习中能有所帮助,请查看我的置顶文章,我由衷感谢! 前端的学习不是一蹴而就,不积跬步无以至千里,不积小流无以成江海。持续不断的努力才能让你我有所收获,专业的知识还得到机构去学习,培训机构的设立有其存在的必然性,你钱花对了吗?
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例