【CSS】经典阴阳太极☯️图形绘制

前言:

好久不刷掘金,今天上来图看到首页一篇关于圆角 Tab 绘制的文章在最后作者说他当年遇到过的一个面试题,用 CSS 手写一个太极图,如下:

思考以及实现:

仔细思考了一下,第一感觉是要实现这个阴阳太极感觉并不难,大致就是:

一个大盒子,里面两个小盒子,一黑一白左右两边站,然后分别在两个小盒子里面再各自弄一个不同颜色的圆形小盒子,定位向对方偏移放到指定位置去。

思路是酱紫没错啦,但是让我手写是不可能的,这辈子都不可能手写。打开 Vscode 火速实操一下。

1. 左右两分布局

html 复制代码
<div class="taiji">
    <div class="left"></div>
    <div class="right"></div>
</div>
css 复制代码
.taiji {
  width: 300px;
  height: 300px;
  background-color: #fff;
  margin-top: 24px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #000;
}
.left {
  height: 100%;
  width: 50%;
  float: left;
}
.right {
  height: 100%;
  width: 50%;
  float: left;
  background-color: #000;
}

2. 实现异色定位圆球

接下来就是分别在左右各自实现一个如下草稿所示的定位的异色圆球:

这里打算直接用伪类来实现,就不加 DOM 元素了:

css 复制代码
.left {
  /* 加上相对定位 */
  position: relative;
  height: 100%;
  width: 50%;
  float: left;
}
.right {
  position: relative;
  height: 100%;
  width: 50%;
  float: left;
  background-color: #000;
}

/*
这里用 border + background-color 来实现黑套白和白套黑的效果,可以节省一个伪类
*/
.right::after {
  position: absolute;
  content: "";
  top: 0;
  left: -75px;
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 50px solid #000;
}
.left::after {
  position: absolute;
  content: "";
  bottom: 0;
  right: -75px;
  background-color: #000;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 50px solid #fff;
}

但是一看实现后的效果有点难蹦了,恍然大悟,这也许就是这东西拿出来考的意义?

众所周知 CSS 中的元素是有层叠顺序的,这里明显 left Box 的小球被 right Box 盖住了

我们换个思路,为什么不直接把两个小球都直接用 right Box 伪类实现呢:

css 复制代码
.right::before {
  position: absolute;
  content: "";
  top: 0;
  left: -75px;
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 50px solid #000;
}
.right::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: -75px;
  background-color: #000;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 50px solid #fff;
}

铛铛铛铛,完美实现了一个太极图

完整代码如下:

html 复制代码
<div class="taiji">
    <div class="left"></div>
    <div class="right"></div>
</div>
css 复制代码
.taiji {
  width: 300px;
  height: 300px;
  background-color: #fff;
  margin-top: 24px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #000;
}
.left {
  position: relative;
  height: 100%;
  width: 50%;
  float: left;
}
.right {
  position: relative;
  height: 100%;
  width: 50%;
  float: left;
  background-color: #000;
}
.right::before {
  position: absolute;
  content: "";
  top: 0;
  left: -75px;
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 50px solid #000;
}
.right::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: -75px;
  background-color: #000;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 50px solid #fff;
}

后话

刚刚上面说到,层叠顺序的问题,导致不能分别在两个盒子里面设置伪类圆球。

但是,我突发奇想,给他俩换了个位置,然后就发现下面的情况:

html 复制代码
<div class="taiji">
    <div class="right"></div>
    <div class="left"></div>
</div>
css 复制代码
.taiji {
  width: 300px;
  height: 300px;
  background-color: #fff;
  margin-top: 24px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #000;
}
.left {
  position: relative;
  height: 100%;
  width: 50%;
  float: left;
}
.right {
  position: relative;
  height: 100%;
  width: 50%;
  float: left;
  background-color: #000;
}
.left::after {
  position: absolute;
  content: "";
  top: 0;
  left: -75px;
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 50px solid #000;
}
.right::after {
  position: absolute;
  content: "";
  bottom: 0;
  right: -75px;
  background-color: #000;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 50px solid #fff;
}

wtf ? 你俩和好了?不遮挡了?这啥子情况?

ing...

相关推荐
web打印社区5 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗5 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长5 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅6 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_6 小时前
Chrome开发者工具
前端·chrome
YiHanXii6 小时前
this 输出题
前端·javascript·1024程序员节
楊无好6 小时前
React中ref
前端·react.js
程琬清君6 小时前
vue3 confirm倒计时
前端·1024程序员节
歪歪1007 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节
唔667 小时前
flutter实现web端实现效果
前端·flutter