QwBqRg

index.html

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

QwBqRg.markdown

QwBqRg

A Pen by Doug on CodePen.

License.

style.scss

#yin-yang {
	width: 96px;
	height: 48px;
	background: #eee;
	border-color: black;
	border-style: solid;
	border-width: 2px 2px 50px 2px;
	border-radius: 100%;
	position: relative;
  
  &:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid black;
    border-radius: 100%;
    width: 12px;
    height: 12px;
  }

  &:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: black;
    border: 18px solid #eee;
    border-radius:100%;
    width: 12px;
    height: 12px;
  }
}