纯css代码实现绘制太极图完整代码

六月初六月初 CSS 2025-02-06 21:57:52

关于太极图想必对于任何一个国人来说都不需要给出详细的说了，太极在中国的历史文化中有着重要概念、范畴。

那么当我们如果需要在网站中创建一个太极图要如何实现呢？

本篇就来告诉你前端开发中除开使用canvas和图片外的另一种实现方法，即css绘制太极图。

css绘制太极图完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			.supremepole {
			    position: relative;
			    width: 96px;
			    height: 48px;
			    background-color: #fff;
			    border-width: 2px 2px 50px 2px;
			    border-style: solid;
			    border-color: #000;
			    border-radius: 50%;
			    box-sizing: content-box;
			}
			 
			.supremepole:before {
			    position: absolute;
			    top: 50%;
			    left: 0;
			    width: 12px;
			    height: 12px;
			    content: '';
			    background-color: #fff;
			    border: 18px solid #000;
			    border-radius: 50%;
			    box-sizing: content-box;
			}
			 
			.supremepole:after {
			    position: absolute;
			    top: 50%;
			    left: 50%;
			    width: 12px;
			    height: 12px;
			    content: '';
			    background-color: #000;
			    border: 18px solid #fff;
			    border-radius: 50%;
			    box-sizing: content-box;
			}
		</style>
		
		<div class="supremepole"></div>
	</body>
</html>

运行上面代码，即可得到如图所示太极图。

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！