One Tag Yin-Yang

by davidelrizzo

HTML

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

CSS

#yin-yang{
margin:20px;
width: 96px;
height: 48px;
background: #fff;
border-color:#000;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}

#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #fff;
border: 18px solid#000;
border-radius: 100%;
width: 12px;
height: 12px;
}


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