太极图可通过CSS实现，核心是利用圆形、半圆与旋转组合，外层容器设为正方形，overflow:hidden；内部用两个半圆（通过border-radius:50%切分）旋转180°形成阴阳鱼，再通过伪元素添加黑白小圆点（阴阳眼），关键点：用position:absolute定位元素，transform:rotate()调整角度，border-radius控制圆弧，确保黑白区域对称且S形曲线流畅，整个过程无需图片，纯CSS绘制，可结合动画实现旋转效果，简洁高效。
用纯CSS绘制太极图：从原理到代码实现
太极图，作为中华传统文化的璀璨瑰宝，以其简洁而深邃的黑白对称、阴阳相生的哲学意蕴，跨越千年，广为流传，在前端开发的奇妙世界里，仅用CSS（层叠样式表）来复刻这一经典符号，不仅是对图形布局能力的绝佳锻炼，更是对CSS强大表现力的一次生动展示，本文将深入剖析太极图的几何结构原理，逐步拆解其纯CSS实现路径,并分享关键技巧与富有启发性的扩展思路。
太极图的结构原理
要精准绘制太极图，首先必须理解其精妙的几何构成，以标准的“阴阳鱼”形态为例,其核心要素包括：
- 外圆：一个完整的圆形,是整个太极图的边界与载体。
- 阴阳鱼身：外圆被纵向平分为左右两部分，左侧为阴（黑色），右侧为阳（白色），或反之，形成两条首尾相衔的“鱼”轮廓。
- 阴阳鱼眼：在阴鱼（黑色部分）的头部区域（即右侧），嵌套着一个白色小圆（阳眼）；在阳鱼（白色部分）的头部区域（即左侧），嵌套着一个黑色小圆（阴眼），这两点睛之笔是阴阳互含、循环往复的具象化体现。
- 完美对称：整个图形关于圆心呈现中心对称，阴阳两部分通过180度旋转可以相互转换,体现了动态平衡的哲学思想。
CSS实现的核心思路
基于上述结构，纯CSS实现的核心策略在于：巧妙运用“嵌套容器”与“精确定位”组合图形元素，利用`border-radius`属性绘制圆形及半圆，并借助`transform`属性进行位置微调与旋转操作,具体可分解为以下关键步骤：
- 外圆容器：设置一个具有`width`和`height`的正方形元素，通过`border-radius: 50%`将其塑造成圆形，同时设置`position: relative`作为内部绝对定位元素的参考系，并应用`overflow: hidden`确保所有子元素严格限制在外圆边界内。
- 半圆元素：创建两个子元素（如`.half-circle`），分别设置它们的`width: 50%`、`height: 100%`，并利用`border-radius`属性精确控制其圆角方向（左半圆使用`border-radius: 100% 0 0 100%`，右半圆使用`border-radius: 0 100% 100% 0`），形成左右半圆效果，通过`position: absolute`和`left`/`right`属性将它们分别定位到容器的左右两侧。
- 小圆元素（鱼眼）：创建两个代表鱼眼的子元素（如`.small-circle`），同样使用`border-radius: 50%`绘制圆形，关键在于精确定位：阴眼（黑色小圆）应位于阳鱼（白色半圆）的头部区域（即左半圆的右侧中间），阳眼（白色小圆）应位于阴鱼（黑色半圆）的头部区域（即右半圆的左侧中间），这通常需要结合`top`、`left`/`right`以及`transform: translate()`进行精确对齐。
详细代码实现
HTML结构
首先构建清晰、语义化的DOM结构，使用一个容器（`.taiji`）包裹所有图形元素,确保层级关系明确：
<div class="taiji"> <!-- 左半圆（阴鱼身） --> <div class="half-circle left"></div> <!-- 右半圆（阳鱼身） --> <div class="half-circle right"></div> <!-- 阴眼（在阳鱼身内） --> <div class="small-circle yin-eye"></div> <!-- 阳眼（在阴鱼身内） --> <div class="small-circle yang-eye"></div> </div>
CSS样式
逐步实现每个元素的样式，重点处理形状、颜色与精确定位。
（1）外圆容器
定义基础尺寸、形状和定位上下文：
.taiji {
width: 200px; /* 宽度 */
height: 200px; /* 高度（确保正方形） */
border-radius: 50%; /* 圆角50%形成正圆 */
position: relative; /* 作为内部绝对定位元素的参考 */
overflow: hidden; /* 裁剪超出外圆的内容 */
background-color: #000; /* 初始背景色（会被半圆覆盖） */
}
（2）半圆元素
创建并定位左右半圆,控制其圆角方向和颜色：
.half-circle {
position: absolute; /* 绝对定位 */
width: 50%; /* 宽度为容器的一半 */
height: 100%; /* 高度占满容器 */
top: 0; /* 顶部对齐容器顶部 */
}
/ 左半圆（阴鱼身）：白色 /
.half-circle.left {
left: 0; / 左侧对齐容器左侧 /
border-radius: 100% 0 0 100%; / 左上、左下圆角，右上、右下直角 /
background-color: #fff; / 白色背景 /
}
/ 右半圆（阳鱼身）：黑色 /
.half-circle.right {
right: 0; / 右侧对齐容器右侧 /
border-radius: 0 100% 100% 0; / 右上、右下圆角，左上、左下直角 /
background-color: #000; / 黑色背景 /
}
（3）小圆元素（阴眼与阳眼）
绘制并精确定位代表阴阳互含的小圆：
标签： #太极
#图CSS
#实现
