HTML5 CSS3 Yinyang Bagua | HTML 5 & CSS 3 - Create a Yinyang Bagua Diagram

Create a Yinyang Bagua diagram using pure CSS3 code:

(What is Yinyang Bagua?)

figure

<meta charset="UTF-8">
<style>
.container {
  margin: 100px;
  position: relative;
  width: 137px;
  height: 137px;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
  border-right: 2px solid white;
  border-top: 2px solid white;
  border-radius: 100%;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.yinyang {
  width: 136px;
  height: 136px;
  background: -moz-linear-gradient(45deg, white 0%, white 50%, black 51%, black 100%);
  background: -webkit-linear-gradient(45deg, white 0%, white 50%, black 51%, black 100%);
  background: linear-gradient(45deg, white 0%, white 50%, black 51%, black 100%);
  border-radius: 100%;
}

.yinyang::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  top: 58px;
  left: 58px;
  background: white;
  border: 24px solid black;
  border-radius: 100%;
}

.yinyang::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  top: 10px;
  left: 10px;
  background: black;
  border: 24px solid white;
  border-radius: 100%;
}

.yao {
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 68px;
  height: 24px;
  position: absolute;
  text-align: center;
}

.yao >div {
  margin: 0 auto;
  padding: 0;
  width: 60px;
  height: 5px;
  margin-bottom: 3px;
}

.qian {
  top: -25px;
  left: -45px;
}

.qian >.positive {
  background: rgb(0, 0, 0);
}

.kun {
  top: 135px;
  left: 115px;
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.kun >.negative {
  background: -moz-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 40%, transparent 41%, transparent 59%, rgb(255, 255, 255) 60%, rgb(255, 255, 255) 100%);
  background: -webkit-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 40%, transparent 41%, transparent 59%, rgb(255, 255, 255) 60%, rgb(255, 255, 255) 100%);
  background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 40%, transparent 41%, transparent 59%, rgb(255, 255, 255) 60%, rgb(255, 255, 255) 100%);
}

.li {
  top: 135px;
  left: -45px;
  -moz-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}

.li >.positive {
  background: rgb(0, 255, 0);
}

.li >.negative {
  background: -moz-linear-gradient(90deg, rgb(0, 255, 0) 0%, rgb(0, 255, 0) 40%, transparent 41%, transparent 59%, rgb(0, 255, 0) 60%, rgb(0, 255, 0) 100%);
  background: -webkit-linear-gradient(90deg, rgb(0, 255, 0) 0%, rgb(0, 255, 0) 40%, transparent 41%, transparent 59%, rgb(0, 255, 0) 60%, rgb(0, 255, 0) 100%);
  background: linear-gradient(90deg, rgb(0, 255, 0) 0%, rgb(0, 255, 0) 40%, transparent 41%, transparent 59%, rgb(0, 255, 0) 60%, rgb(0, 255, 0) 100%);
}

.kan {
  top: -25px;
  left: 115px;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.kan >.positive {
  background: rgb(255, 0, 255);
}

.kan >.negative {
  background: -moz-linear-gradient(90deg, rgb(255, 0, 255) 0%, rgb(255, 0, 255) 40%, transparent 41%, transparent 59%, rgb(255, 0, 255) 60%, rgb(255, 0, 255) 100%);
  background: -webkit-linear-gradient(90deg, rgb(255, 0, 255) 0%, rgb(255, 0, 255) 40%, transparent 41%, transparent 59%, rgb(255, 0, 255) 60%, rgb(255, 0, 255) 100%);
  background: linear-gradient(90deg, rgb(255, 0, 255) 0%, rgb(255, 0, 255) 40%, transparent 41%, transparent 59%, rgb(255, 0, 255) 60%, rgb(255, 0, 255) 100%);
}

.dui {
  top: 55px;
  left: -80px;
  -moz-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}

.dui >.positive {
  background: rgb(255, 0, 0);
}

.dui >.negative {
  background: -moz-linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 0, 0) 40%, transparent 41%, transparent 59%, rgb(255, 0, 0) 60%, rgb(255, 0, 0) 100%);
  background: -webkit-linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 0, 0) 40%, transparent 41%, transparent 59%, rgb(255, 0, 0) 60%, rgb(255, 0, 0) 100%);
  background: linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 0, 0) 40%, transparent 41%, transparent 59%, rgb(255, 0, 0) 60%, rgb(255, 0, 0) 100%);
}

.gen {
  top: 55px;
  left: 150px;
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.gen >.positive {
  background: rgb(0, 255, 255);
}

.gen >.negative {
  background: -moz-linear-gradient(90deg, rgb(0, 255, 255) 0%, rgb(0, 255, 255) 40%, transparent 41%, transparent 59%, rgb(0, 255, 255) 60%, rgb(0, 255, 255) 100%);
  background: -webkit-linear-gradient(90deg, rgb(0, 255, 255) 0%, rgb(0, 255, 255) 40%, transparent 41%, transparent 59%, rgb(0, 255, 255) 60%, rgb(0, 255, 255) 100%);
  background: linear-gradient(90deg, rgb(0, 255, 255) 0%, rgb(0, 255, 255) 40%, transparent 41%, transparent 59%, rgb(0, 255, 255) 60%, rgb(0, 255, 255) 100%);
}

.zhen {
  top: 170px;
  left: 35px;
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.zhen >.positive {
  background: rgb(255, 255, 0);
}

.zhen >.negative {
  background: -moz-linear-gradient(90deg, rgb(255, 255, 0) 0%, rgb(255, 255, 0) 40%, transparent 41%, transparent 59%, rgb(255, 255, 0) 60%, rgb(255, 255, 0) 100%);
  background: -webkit-linear-gradient(90deg, rgb(255, 255, 0) 0%, rgb(255, 255, 0) 40%, transparent 41%, transparent 59%, rgb(255, 255, 0) 60%, rgb(255, 255, 0) 100%);
  background: linear-gradient(90deg, rgb(255, 255, 0) 0%, rgb(255, 255, 0) 40%, transparent 41%, transparent 59%, rgb(255, 255, 0) 60%, rgb(255, 255, 0) 100%);
}

.xun {
  top: -60px;
  left: 35px;
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);  
}

.xun >.positive {
  background: rgb(0, 0, 255);
}

.xun >.negative {
  background: -moz-linear-gradient(90deg, rgb(0, 0, 255) 0%, rgb(0, 0, 255) 40%, transparent 41%, transparent 59%, rgb(0, 0, 255) 60%, rgb(0, 0, 255) 100%);
  background: -webkit-linear-gradient(90deg, rgb(0, 0, 255) 0%, rgb(0, 0, 255) 40%, transparent 41%, transparent 59%, rgb(0, 0, 255) 60%, rgb(0, 0, 255) 100%);
  background: linear-gradient(90deg, rgb(0, 0, 255) 0%, rgb(0, 0, 255) 40%, transparent 41%, transparent 59%, rgb(0, 0, 255) 60%, rgb(0, 0, 255) 100%);
}

</style>

<div class="container">  
  <div class="yinyang">
  </div>
  <div>
    <div class="qian yao">乾<div class="positive"></div><div class="positive"></div><div class="positive"></div></div>
    <div class="kun yao">坤<div class="negative"></div><div class="negative"></div><div class="negative"></div></div>
    <div class="li yao">离<div class="positive"></div><div class="negative"></div><div class="positive"></div></div>
    <div class="kan yao">坎<div class="negative"></div><div class="positive"></div><div class="negative"></div></div>
    <div class="dui yao">兑<div class="negative"></div><div class="positive"></div><div class="positive"></div></div>
    <div class="gen yao">艮<div class="positive"></div><div class="negative"></div><div class="negative"></div></div>
    <div class="zhen yao">震<div class="negative"></div><div class="negative"></div><div class="positive"></div></div>
    <div class="xun yao">巽<div class="positive"></div><div class="positive"></div><div class="negative"></div></div>
  </div>
</div>

乾

坤

离

坎

兑

艮

震

巽