SOURCE

	<div class="bagua">
			<div></div>
			<div></div>	
			<div></div>
			<div></div>
		</div>

.bagua{
				border: 1px solid #000000;
				box-sizing: border-box;
				width: 200px;
				height: 200px;
				border-radius: 50%;
				overflow: hidden;
				position: relative;
			}
			.bagua div{
				box-sizing: border-box;			
				text-align: center;
				
			}
			.bagua div:nth-of-type(1){
				width: 200px;
				height: 100px;
				background-color: #000000;
			}
			.bagua div:nth-of-type(2){
				width: 200px;
				height: 100px;
			}
			.bagua div:nth-of-type(3){
				position: absolute;
				top: 40px;
				left: 0px;				
				width: 100px;
				height: 100px;
				background-color: #000000;
				border-radius: 50%;
			}
			.bagua div:nth-of-type(3):after{
				content: "";
				position: absolute;
				top: 40px;
				left: 40px;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background-color: #FFFFFF;
			}
			.bagua div:nth-of-type(4){
				position: absolute;
				top: 60px;
				right: 0px;				
				width: 100px;
				height: 100px;
				background-color: #FFFFFF;
				border-radius: 50%;
			}
			.bagua div:nth-of-type(4):after{
				content: "";
				position: absolute;
				top: 40px;
				left: 40px;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background-color: #000;
			}