[分享]css八卦图

CSS八卦图是指一个用CSS样式实现的八卦图形。八卦图是中国古代哲学中的重要图形，表达了太极哲学的观点。而CSS八卦图则是将这个图形通过CSS样式实现出来。下面是一份实现CSS八卦图的代码：/设置八卦...

CSS八卦图是指一个用CSS样式实现的八卦图形。八卦图是中国古代哲学中的重要图形，表达了太极哲学的观点。而CSS八卦图则是将这个图形通过CSS样式实现出来。

下面是一份实现CSS八卦图的代码：

/**设置八卦图**/
.gua {
  /*设置八卦图形*/
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #000;
  position: relative;
}
/*绘制阴阳线*/
.yinyang {
  border-radius: 50%;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border: 1px solid #000;
}
.yinyang:before {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  background-color: #000;
  border-radius: 50%;
}
.yinyang:after {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  background-color: #fff;
  border-radius: 50%;
}
/*绘制阴阳鱼*/
.yin {
  border-radius: 50%;
  width: 50%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(-180deg);
  background-color: #000;
  border: 1px solid #000;
}
.yin:before {
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 50%;
}
/*绘制阳阳鱼*/
.yang {
  border-radius: 50%;
  width: 50%;
  height: 50%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border: 1px solid #000;
}
.yang:before {
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  border-radius: 50%;
}

通过上面的代码，我们可以发现在CSS中，实现八卦图主要分为三个部分：画八卦图，绘制阴阳线和绘制阴阳鱼。

首先我们通过设置圆形的边框和背景色，绘制出了八卦图的圆形部分。然后在该圆形上绘制了一条阴阳线，并设置了该线的样式。最后，通过在阴阳线上分别绘制阴阳鱼来完成了整个八卦图的绘制。

总之，CSS八卦图是CSS样式中的一个有趣的应用，也是CSS艺术中的一部分，可以让我们更深入地了解和掌握CSS样式的绘制和应用技巧。