Yin yang

by Daniel Pietrasik

HTML

<!-- 
 - CSS Formy i struktury tworzone za pomocą kodu
 - https://danielpietrasik.pl/css-formy-i-struktury/
-->

<div id="yin-yang"></div>

CSS

/**
 * CSS Formy i struktury tworzone za pomocą kodu
 * https://danielpietrasik.pl/css-formy-i-struktury/
 **/

#yin-yang {
	width: 50px;
	height: 99px;
	background: #fff;
	border: 2px solid #000;
	border-right-width: 50px;
	border-radius: 100%;
	position: relative;
  margin: 40px auto;
}

#yin-yang:before {
	position: absolute;
	content: "";
	bottom: -1px;
	left: 50%;
	background: #fff;
	border: 19px solid #000;
	border-radius: 100%;
	width: 13px;
	height: 13px;
}

#yin-yang:after {
	position: absolute;
	content: "";
	top: -1px;
	left: 50%;
	background: #000;
	border: 19px solid #fff;
	border-radius:100%;
	width: 13px;
	height: 13px;
}

JavaScript

//100-2-12-19