【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...

相关推荐
速易达网络1 小时前
Bootstrap 5 响应式网站首页模板
前端·bootstrap·html
etsuyou1 小时前
js前端this指向规则
开发语言·前端·javascript
lichong9511 小时前
Android studio 修改包名
android·java·前端·ide·android studio·大前端·大前端++
cai_huaer1 小时前
BugKu Web渗透之 cookiesWEB
前端·web安全
lichong9511 小时前
Git 检出到HEAD 再修改提交commit 会消失解决方案
java·前端·git·python·github·大前端·大前端++
友友马2 小时前
『 QT 』QT控件属性全解析 (一)
开发语言·前端·qt
不想上班只想要钱2 小时前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
流***陌3 小时前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
岁月宁静3 小时前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能
金士顿3 小时前
为什么MainWindow.xaml绑定的datacontext,EtherCATSuiteCtrl.xaml直接用了?
前端