CSS太极图是一种非常经典的前端设计,用一些简单的代码,就能绘制出一个非常酷炫的图形。以下是一个CSS太极图的代码示例:
.taiji { width: 200px; height: 200px; border-radius: 50%; border: 10px solid #000; border-top-color: transparent; transform: rotate(45deg); } .taiji:before { content: ""; display: block; width: 100px; height: 100px; border-radius: 50%; background: #000; position: absolute; top: 0; left: 50%; margin-left: -50px; } .taiji:after { content: ""; display: block; width: 100px; height: 100px; border-radius: 50%; background: #fff; position: absolute; bottom: 0; left: 50%; margin-left: -50px; }
首先我们创建一个圆形的div,设置宽度和高度,边框半径,以及黑色的边框。然后我们通过添加一个:before伪元素在圆形的顶部绘制黑色的半圆形。在添加一个:after伪元素在圆形的底部绘制白色的半圆形。最后通过旋转来展示一个完整的太极图。
通过简单的CSS代码,我们就能创造一种独特、酷炫的太极图,在前端开发领域中占据很重要的地位。