CSS3我们一般都是用来进行布局，在工作中很少会刻意去用它画画，毕竟这有点耗时间。
一、八卦
分析：它就是多个圆叠加的效果。
1、给body加个背景色，否则看不清八卦的白色部分：
body{background:#efefef;}
2、画一个圆，渐变是由白到黑的激烈渐变：
.wrap{width: 300px;
height: 300px;
background: linear-gradient(to right,#fff 50%,#000 50%);
border-radius: 50%
}
<div class="wrap"></div>
效果图如下：
3、在上下各画一黑一白两个圆，圆的直径刚好是刚才大圆的半径，同时水平居中，然后让它俩里面的内容水平和垂直居中（方便画里面更小的圆）：
.inner{
width: 150px;
height:150px;
border-radius: 50%;
margin: auto
}
.white{
background-color: #fff;
}
.black{
background-color:#000;
}
<div class="wrap">
<div class="inner white"></div>
<div class="inner black"></div>
</div>
效果图如下：
4、利用刚才的两个圆的 after 伪元素，各画一个更小的圆，背景色和这两个大圆正好相反，这样就画好了，最终代码如下：
<style type="text/css">
body{background:#efefef;}
.wrap{
width: 300px;
height: 300px;
background: linear-gradient(to right,#fff 50%,#000 50%);
border-radius: 50%;
}
.inner{
width: 150px;
height:150px;
border-radius: 50%;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
.inner:after{
content:'';
width: 50px;
height: 50px;
border-radius: 50%
}
.white{
background-color: #fff;
}
.white:after{
background-color: #000;
}
.black{
background-color:#000;
}
.black:after{
background-color:#fff;
}
</style>
<div class="wrap">
<div class="inner white"></div>
<div class="inner black"></div>
</div>
最终八卦的效果图：
二、爱心
分析：爱心其实就是两个圆+一个旋转45°的正方形。
1、先定义一个红色旋转45°的外框，同时相对定位，方便圆的各个组成部分定位：
<style type="text/css">
.heart{
position: relative;
background: red;
width: 300px;
height: 300px;
transform:rotate(45deg);
}
</style>
<div class="heart"></div>
2、利用heart的before和after伪元素，在它的左右各加一个直径和它宽度一样的圆，同时调整两个圆和heart的边相切，最终代码：
<style type="text/css">
.heart{
position: relative;
background: red;
width: 300px;
height: 300px;
transform:rotate(45deg);
margin:auto;
top:100px;
}
.heart:before,.heart:after{
content: '';
position: absolute;
top: 0;
left: -150px;
width: 300px;
height: 300px;
border-radius: 50%;
background: red;
}
.heart:after{
top: -150px;
left: 0;
}
</style>
<div class="heart"></div>
最终效果图：
三、CSS画图的好处：
CSS画图虽然比直接切成图片引用要耗时间，但是也有很多好处，例如减少请求次数、显示速度快，减少网页大小等，并且画出来的图都是矢量的。简单的图，用CSS画还是比较划算的。
当然，不建议复杂的图用CSS画，耗时耗力，兼容性还差。
四、结束语：
上面的图都非常简单，如果用上阴影（CSS3的阴影非常强大）、渐变，效果会更好，画面会更加丰满，立体感更强。