只用一个 HTML 元素可以写出多少形状？——不规则图形篇

Conan9912345

于 2024-08-23 10:53:05 发布

阅读量416

点赞数 14

分类专栏： HTML + CSS 文章标签： html 前端 css css3 html5

本文链接：https://blog.csdn.net/Conan9912345/article/details/141459412

版权

HTML + CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

上一篇章的末尾（伪元素篇），我们送上了气泡框和笑脸两个好玩的案例。这两个案例其实就是使用伪元素实现的不规则图形的两个预热案例。

相信经过这两个案例的预热，聪明的您已经发现，通过适当且合理的拆分，就可以把相对复杂的图形拆分成两三个相对简单的图形。

今天，我们就趁热打铁，写一些相对丰富的图案吧！

一、钻石

钻石之所以美丽，是因为它集美丽、耐久和稀缺于一身，满足了作为宝石的三大基本要素：美丽、耐久和稀缺。

钻石的美丽源于其独特的物理和光学特性。它是唯一一种集最高硬度、强折光率及高散射于一体的宝石种类，这些特性使得钻石能够展现出无与伦比的火花和光彩，这是任何其他宝石种类都无法比拟的。

我们知道，金刚石是自然界最坚硬的物质。钻石相比金刚石要更加纯净，特殊的纯碳元素结晶，使得钻石在仅次于金刚石的坚硬的同时，其耐久性也得以体现。

然而，随着科学家对地幔结构的研究，金刚石的稀缺属性也慢慢退化。但不妨碍一颗经过精心打磨之后的钻石，依然是美得不可方物。

那么，咱们今天就先写一个简单的钻石热热身吧！

div {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 200px;
  height: 0;
  border-right: 100px solid transparent;
  border-bottom: 100px solid red;
  border-left: 100px solid transparent;
}
div::before {
  position: absolute;
  top: 100px;
  left: -100px;
  display: block;
  width: 0;
  height: 0;
  border-top: 200px solid red;
  border-right: 200px solid transparent;
  border-left: 200px solid transparent;
  content: '';
}

相信通过前面篇章的洗礼，这个代码对大家来说，已经非常非常非常的简单了。

好嘞，热身结束。接下来我们要开始动真格了！

二、无穷

有人说，帅气的看门的保安大叔才是世界上最爱岗敬业的哲学家，因为只要是他在岗的每一刻，对每一个经过他看守大门的陌生人，他都会不厌其烦的问出哲学界的三大问题：你从哪里来？你到哪里去？你是谁？

你从哪里来？这是古希腊关注的世界的本源问题。

你到哪里去？这是中世纪基督教哲学所关注的生命归宿问题。

你是谁？这是现代哲学所关注的主体性问题，所探讨的是思维与存在的问题，即我与世界。

有时候我也在想这个问题，我们有前世吗？我们以后还会转世吗？集体潜意识及其宇宙数据库是否真的存在？宇宙是无限大吗？宇宙之外是什么呢？在138.2 亿年(±0.21)前，宇宙诞生之前有什么呢？

一切的一切，似乎最后的答案，都可以回归到一个数字 —— 无穷（∞）！

div {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 570px;
  height: 250px;
}
div::before,
div::after {
  position: absolute;
  display: block;
  width: 200px;
  height: 200px;
  border: 25px solid red;
  content: '';
  transform: rotate(-45deg);
}
div::before {
  left: 0;
  border-radius: 50% 50% 0 50%;
}
div::after {
  right: 0;
  border-radius: 0 50% 50% 50%;
}

我们把 div 元素控制成一个容器，把两个伪元素通过圆角边框控制为两个水滴形状，通过定位和相应角度的旋转，得到了一个无穷（∞）的形状。

要说科幻片的巅峰，莫过于有名的《三体》。三体人的科技超越了人类，但是三体人的思维是共享的，而人类的思想和语言是分开的。所以，三体人通过智子（本质是质子，也就是氢原子的原子核）量子纠缠的方式掌握人类的一切信息，却无法知道人类的思想。

作为已经工作了十五年的一名前端程序员，我想说：在前端的范畴中，只有我们想不到，没有我们做不到。愿大家的思维与灵感都宛如泉水般的无穷无尽，取之不尽用之不竭！

三、小箭头

有没有发现，我们的脑回路还是比较大的？是不是该加大一些难度了呢？

div {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 800px;
  height: 800px;
  background: transparent;
  border-radius: 50%;
  box-shadow: 50px -50px red;
}
div::before {
  position: absolute;
  right: -60px;
  bottom: 100px;
  display: block;
  width: 0;
  height: 0;
  border-right: 200px solid transparent;
  border-bottom: 200px solid red;
  content: '';
}

能看出来是什么吗？一个月牙的一端加上一个三角形，一个小小的箭头就诞生了！

嗯~~~~~~~~~~这个箭头形状还不能够代表脑回路。

div {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 600px;
  height: 600px;
  background: transparent;
  border: 50px solid red;
  border-bottom: none;
  border-radius: 50%;
}
div::before {
  position: absolute;
  right: 75px;
  bottom: -75px;
  display: block;
  width: 0;
  height: 0;
  border-right: 200px solid transparent;
  border-bottom: 200px solid red;
  content: '';
  transform: rotate(35deg);
}

不用阴影写月亮了，看看效果吧！

嗯~~~~~~有点脑回路的味道了，但是更像是一条蛇在咬自己的尾巴。

div {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 600px;
  height: 600px;
  background: transparent;
  border: 50px solid red;
  border-bottom: 50px solid transparent;
  border-radius: 50%;
}
div::before {
  position: absolute;
  right: -50px;
  bottom: 0;
  display: block;
  width: 0;
  height: 0;
  border-right: 200px solid transparent;
  border-bottom: 200px solid red;
  content: '';
}

貌似代码越来越少了，能行吗？

嗯~ o(*￣▽￣*)o果然脑回路很大！

相比之下，直接指向一个方向的直线箭头，相信难不倒聪明的您！

四、抖音

脑洞太大了，还是刷个抖音放松一下吧！

div {
  position: fixed;
  top: 100px;
  right: 0;
  left: 0;
  margin: auto;
  width: 100px;
  height: 500px;
  background: red;
}
div::before,
div::after {
  position: absolute;
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  content: '';
  transform: rotate(-45deg);
}
div::before {
  right: 0;
  bottom: -200px;
  border: 100px solid red;
  border-right-color: transparent;
}
div::after {
  top: -200px;
  left: 0;
  border: 100px solid transparent;
  border-left-color: red;
}

天啊，刷个抖音都要来一次代码！

好吧，暂时先不毒害别的短视频了！去户外吹吹风吧！O(∩_∩)O

五、彩虹

相信大家都会唱一首非常励志的歌曲——《真心英雄》，其中最励志的歌词莫过于：不经历风雨，怎么见彩虹？

div {
  width: 100vw;
  height: 100vh;
  background-color: #abcdef;
  background-image: radial-gradient(at bottom, #abcdef 0%, #abcdef 25%, red 30%, orange 35%, yellow 40%, green 45%, blue 50%, cyan 55%, violet 60%, #abcdef 65%);
}
div::before,
div::after {
  position: absolute;
  display: block;
  background: white;
  box-shadow: 0 0 5px 5px white;
  content: '';
}
div::before {
  top: 250px;
  right: 400px;
  width: 300px;
  height: 100px;
  border-radius: 60% 50% 50% 60% / 50% 50% 50% 50%;
}
div::after {
  top: 200px;
  right: 450px;
  width: 125px;
  height: 100px;
  border-radius: 50%;
}

难道写了一个彩虹？