首页 前端知识 只用一个 HTML 元素可以写出多少形状?——伪元素篇(下)

只用一个 HTML 元素可以写出多少形状?——伪元素篇(下)

2024-09-21 21:09:12 前端知识 前端哥 422 268 我要收藏

经过我们上一篇章里诚意满满的提供了满满干货的伪元素篇(上),相信大家已经对伪元素有了一个较深的认识。

我们简单回顾了一下正五边形的画法,也让大家明白使用伪元素画各种形状的方法了。

那么今天,我们就通过一些案例来对伪元素的控制更加熟练吧!


一、正六边形

咱们照葫芦画瓢,模仿上一篇章中的正五边形,写一个简单的正六边形吧!

很明显,直接使用一个矩形两个等腰三角形就可以写出这个正六边形

使用简单的计算,得到如下尺寸:

我们使用 div 元素自己构建中间矩形,使用 ::before 伪元素构建上面等腰三角形,再使用 ::after 伪元素构建下面等腰三角形

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

通过简单的正六边形案例,相信聪明的您已经发现,想要写出个性化的形状,关键是需要会拆分,把复合形状拆分两个三个简单的形状,就比较容易实现了!


二、爱心

基于上面说的,咱们需要思考一下,一个爱心如何可以拆分成两个三个简单的形状?我就用一个简单的示意图直接公布答案吧!

没错,一个正方形,然后以正方形边长直径,画两个圆形,采用相同背景色,控制位置,并整体旋转 45deg 即可。直接上代码:

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

可以看到,只需要在 div 元素中设置 transform 属性的 rotate 方法进行旋转即可。

如何?效果不错吧!学会表白了吗?O(∩_∩)O


三、太极

通过写爱心的牛刀小试,对把复合形状拆分成两个三个简单的形状之法,有写感觉了吗?那么我们继续,写一个太极图试试看吧!

怎么样?看懂如何拆分了吗?这个示意图相对难懂一些,我们就一步一步来吧!

首先,写一个矩形矩形两倍,设置边框红色下边框宽度矩形一样,保证一半红色一半白色

width: 400px;
height: 200px;
border: 5px solid red;
border-bottom-width: 205px;

细心的您一定已经发现了,下边框宽度矩形高度加上上边框宽度,熟悉盒模型的您一定知道原因。

既然是太极,那么我们设置成圆形吧!

border-radius: 50%;

边框也会跟着一起变成圆形

然后,我们写两个小圆放在里面,设置左边小圆背景色红色右边小圆背景色白色

div::before {
  position: absolute;
  top: 100px;
  display: block;
  width: 200px;
  height: 200px;
  background: red;
  border-radius: 50%;
  content: '';
}
div::after {
  position: absolute;
  top: 100px;
  right: 0;
  display: block;
  width: 200px;
  height: 200px;
  background: white;
  border-radius: 50%;
  content: '';
}

开始有点点感觉了:

突然想到,我们在设置背景色的同时,还可以设置边框。那么,假如我们巧用盒模型,把小圆宽高设置一些,然后用边框填充一样大小

左边小圆,我们设置背景色白色边框红色右边小圆,我们设置背景色红色边框白色。会是什么样的效果呢?

div::before {
  position: absolute;
  top: 100px;
  display: block;
  width: 70px;
  height: 70px;
  background: white;
  border: 65px solid red;
  border-radius: 50%;
  content: '';
}
div::after {
  position: absolute;
  top: 100px;
  right: 0;
  display: block;
  width: 70px;
  height: 70px;
  background: red;
  border: 65px solid white;
  border-radius: 50%;
  content: '';
}

相信 CSS 的实力不会让大家失望:

无极生太极,太极生两仪,两仪生三才,三才生四象,四象生五行,五行生六合,六合生七星,七星生八卦,八卦生九宫,一切归十方。

人法地,地法天,天法道,道法自然。所谓一阴一阳谓之道,此乃太极!


四、心造极,蕴自成

那是一个阳光明媚的下午,蓝蓝的天空中飘着朵朵白云,微风拂过茶席,我与一位美女茶艺师邂逅于双遂月茶楼。看她一系列丝滑的功夫茶操作如此婀娜多姿,仪态端庄优雅贻笑大方,真是此景只应天上有,人间难得几回见。

出于对茶道之雅兴,我请她赐予茶道之法。她淡然一笑,送我影响我一生的六字箴言:心造极,蕴自成!

使用伪元素,结合我们之前的篇章,可以写出太多太多的图形,全部写出来估计写一本长篇小说都足够了。那这里,我就直接附上五角星气泡框以及笑脸源代码共大家参悟吧!

1. 五角星

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五角星</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
  border: none;
}
div {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-right: 123.6px solid transparent;
  border-bottom: 380.4px solid red;
  border-left: 123.6px solid transparent;
}
div::before,
div::after {
  position: absolute;
  top: 190.2px;
  display: block;
  width: 0;
  height: 0;
  border-right: 323.6px solid transparent;
  border-bottom: 235.1141px solid red;
  border-left: 323.6px solid transparent;
  content: '';
}
div::before {
  left: -323.6px;
  transform: rotate(35deg);
}
div::after {
  right: -323.6px;
  transform: rotate(-35deg);
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

2. 气泡框

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>气泡框</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
  border: none;
}
div {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 800px;
  height: 400px;
  border: 5px solid red;
  border-radius: 50%;
  font-size: 72px;
  text-align: center;
  line-height: 400px;
  color: red;
}
div::before,
div::after {
  position: absolute;
  right: 0;
  display: block;
  border: 5px solid red;
  border-radius: 50%;
  content: '';
}
div::before {
  bottom: 25px;
  width: 50px;
  height: 50px;
}
div::after {
  bottom: -25px;
  width: 25px;
  height: 25px;
}
</style>
</head>
<body>
  <div>心造极,蕴自成!</div>
</body>
</html>

3. 笑脸

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>笑脸</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
  border: none;
}
div {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 1000px;
  height: 800px;
  border: 5px solid red;
  border-radius: 50%;
}
div::before,
div::after {
  position: absolute;
  display: block;
  border-radius: 50%;
  content: '';
}
div::before {
  top: 200px;
  left: 200px;
  width: 100px;
  height: 100px;
  border-top: 10px solid red;
  box-shadow: 400px 0 red;
}
div::after {
  right: 0;
  bottom: 200px;
  left: 0;
  width: 500px;
  height: 200px;
  margin: auto;
  border-bottom: 15px solid red;
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

怎么样?是不是很神奇?我们仅仅只用了一个 div 元素就写出了那么多丰富多彩的图案。

心造极,蕴自成!

在此,也将这六字箴言送给大家,望大家永不言弃,不断进取,更上一层楼!

敬请期待我们的下一篇章 —— 不规则图形篇!

关注“临界程序员”,为您送上更多精彩内容!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18514.html
标签
图形渲染
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!