简介
今天教大家用CSS属性做一个简单的阴阳图，效果如下
image.png
只需用简单的CSS样式就可以完成这个阴阳图，这个阴阳图就仅仅是一个div
起步
第一步我们先做一个简单的椭圆，在HTML里添加一个div作为阴阳图的容器。
<div id="yin-yang"></div>
然后用 border-radius 画一个椭圆，这里用 height 大小为 width 两倍就可以了，
#yin-yang {
width: 96px;
height: 48px;
border: 1px solid #41B883;
border-radius: 50%;
}
效果如下
image.png
变大半圆
我们发现这个椭圆和我们想象的圆不一样呀，这里只要将下面的border宽度变大到和height一半就可以啦
#yin-yang {
width: 96px;
height: 48px;
border: 1px solid #41B883;
border-bottom-width: 48px;
border-radius: 50%;
}
效果如下
image.png
是不是有点感觉了呢？下面继续画左右两边的小圆
画小圆
这里先说一下伪元素的概念，就像伪类一样， 伪元素添加到选择器，但不是描述特殊状态，它们允许您为元素的某些部分设置样式。这里用到的伪元素是 ::before 和 ::after，相当于在div里面添加前面和后面两个元素。
这里要注意：在伪元素要添加content，否则设置宽高都没用的；还有就是要设置position属性，否则还伪元素还是不会显示
#yin-yang {
position: relative;
width: 96px;
height: 48px;
border: 1px solid #41B883;
border-bottom-width: 48px;
border-radius: 50%;
}
#yin-yang::before {
content: '';
position: absolute;
width: 12px;
height: 12px;
background: red;
}
这样我们就将伪元素显示出来了，现在对这个伪元素加些别的样式，让他的位置和颜色和阴阳图相符合
效果如下
image.png
美化小圆
- 首先确定好位置，这里要注意，不要直接将left设置为半径的四分之一，因为还要考虑到border的所占的长度
- 然后就添加border颜色为大圆的下半部分的颜色
- 最后将这个伪元素用
border-radius: 50%变成小圆
#yin-yang {
position: relative;
width: 96px;
height: 48px;
border: 1px solid #41B883;
border-bottom-width: 48px;
border-radius: 50%;
}
#yin-yang::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 12px;
height: 12px;
background: white;
border: 18px solid #41B883;
border-radius: 50%;
}
效果如下
image.png
和 before 伪元素一样的思路，设置一个 after 伪元素，将上面的属性取一下反，就有右边的小半圆了，所以总的CSS样式如下
#yin-yang {
position: relative;
width: 96px;
height: 48px;
border: 1px solid #41B883;
border-bottom-width: 48px;
border-radius: 50%;
}
#yin-yang::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 12px;
height: 12px;
background: white;
border: 18px solid #41B883;
border-radius: 50%;
}
#yin-yang::after {
content: '';
position: absolute;
top: 50%;
right: 0;
width: 12px;
height: 12px;
background: #41B883;
border: 18px solid white;
border-radius: 50%;
}
最终的效果如下
image.png
