上一篇章的末尾(伪元素篇),我们送上了气泡框和笑脸两个好玩的案例。这两个案例其实就是使用伪元素实现的不规则图形的两个预热案例。
相信经过这两个案例的预热,聪明的您已经发现,通过适当且合理的拆分,就可以把相对复杂的图形拆分成两三个相对简单的图形。
今天,我们就趁热打铁,写一些相对丰富的图案吧!
一、钻石
钻石之所以美丽,是因为它集美丽、耐久和稀缺于一身,满足了作为宝石的三大基本要素:美丽、耐久和稀缺。
钻石的美丽源于其独特的物理和光学特性。它是唯一一种集最高硬度、强折光率及高散射于一体的宝石种类,这些特性使得钻石能够展现出无与伦比的火花和光彩,这是任何其他宝石种类都无法比拟的。
我们知道,金刚石是自然界最坚硬的物质。钻石相比金刚石要更加纯净,特殊的纯碳元素结晶,使得钻石在仅次于金刚石的坚硬的同时,其耐久性也得以体现。
然而,随着科学家对地幔结构的研究,金刚石的稀缺属性也慢慢退化。但不妨碍一颗经过精心打磨之后的钻石,依然是美得不可方物。
那么,咱们今天就先写一个简单的钻石热热身吧!
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%;
}
难道写了一个彩虹?
这个彩虹和云朵写的相对来说粗糙了一些,留给聪明的您进行调整吧!
↓
↓
↓
不规则图形篇,其实就是前面几个篇章的一个特殊案例扩展,并没有新的干货知识。由于不规则图形可以有千千万万,全部写出来是不现实的。于是,我们今天就这样写上一些案例供大家进行发散思维吧!
敬请期待我们本系列的最后一个篇章 —— 动画篇
关注“临界程序员”,为您送上更多精彩内容!