html太极图怎么写

在HTML中创建一个太极图，我们可以使用HTML和CSS来实现，太极图由两个相互缠绕的半圆组成，一个黑色，一个白色，每个半圆中还有一个相反颜色的小圆,下面我将详细介绍如何用HTML和CSS编写一个简单的太极图。

我们需要创建一个HTML结构，用来承载太极图，这里我们可以使用一个div元素，并为它设置一个类名,方便后续的样式编写。

Markup

<div class="taiji"></div>

我们需要编写CSS样式,以下是具体的步骤和代码：

设置taiji类的宽度和高度,以及背景颜色。

CSS

.taiji {
  width: 200px;
  height: 200px;
  background: linear-gradient(90deg, #fff 50%, #000 50%);
  border-radius: 50%;
  position: relative;
}

这里我们使用了linear-gradient函数来创建黑白两色的背景，border-radius设置为50%使其成为圆形。

我们需要在太极图中添加两个小圆，为了简化代码，我们可以使用伪元素::before和::after。

CSS

.taiji::before,
.taiji::after {
  content: '';
  position: absolute;
  width: 50%;
  height: 100%;
  border-radius: 50%;
}

html太极图怎么写

现在我们来设置两个小圆的具体样式。

CSS

.taiji::before {
  top: 0;
  left: 50%;
  background: radial-gradient(circle at 50% 50%, #000 40%, transparent 41%);
}
.taiji::after {
  bottom: 0;
  left: 0;
  background: radial-gradient(circle at 50% 50%, #fff 40%, transparent 41%);
}

这里我们使用了radial-gradient来创建小圆，并通过circle at定位小圆的位置。

以下是将所有代码整合在一起的完整示例：

Markup

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>太极图</title>
<style>
  .taiji {
    width: 200px;
    height: 200px;
    background: linear-gradient(90deg, #fff 50%, #000 50%);
    border-radius: 50%;
    position: relative;
  }
  .taiji::before,
  .taiji::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    border-radius: 50%;
  }
  .taiji::before {
    top: 0;
    left: 50%;
    background: radial-gradient(circle at 50% 50%, #000 40%, transparent 41%);
  }
  .taiji::after {
    bottom: 0;
    left: 0;
    background: radial-gradient(circle at 50% 50%, #fff 40%, transparent 41%);
  }
</style>
</head>
<body>
<div class="taiji"></div>
</body>
</html>