今天，我们利用CSS实现太极图。具体代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS基本形状——太极图</title> <style type="text/css"> * { margin:40px; padding:0px; } .yinyang { width: 96px; height: 48px; background: #fff; border-style: solid; border-color: black; border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative; } .yinyang::before { content: ""; width: 12px; height: 12px; border: 18px solid black; border-radius: 100%; background: #fff; position: absolute; top: 50%; } .yinyang::after { content: ""; width: 12px; height: 12px; border: 18px solid #fff; background: black; border-radius: 100%; position: absolute; top: 50%; left: 50%; }</style></head><body> <div class="yinyang"></div></body></html>
实现效果如下：
