CSS图形制作

CSS如何画一个圆？最简单的方法：首先我们写一个div 给他一个<div class="circle"></div>，然后用width和height属性来做一个正方形，给他一个background属性比如用黑色background：red，然后我们用border-radius属性让这个正方形的角锐化，当锐化到一定程度（通常是50%以上），一个圆就画出来了

 

如上图所示，我们可以发现用CSS来画圆时 可以利用border-radius属性来实现，那如果我们要画一个三角形呢，好像用border-radius没什么用，这时候我们要引入一个叫border的属性，也就是边界，同样我们用一个<div class="triangle"></div>,当我们给一个width和height为50px的正方形，但是你看不见他，那我们就用border属性给他加上一个边框如下图，

你看到上图就会明白我为什么要把border的上下左右分开写还给上不同的颜色，因为这样一来我们就看到每一个边框都是一个梯形，当我们把刚才写的中间的正方形去掉，梯形的上底为0时，就变成了四个三角形啦，为了明显一点 我们让border变成50px，如下图

 我们4个三角形都有了那一个三角形怎么做呢，很简单，把别的三个三角形的颜色定义为透明（transparent）不就好啦，为了控制三角形的高度把border-top去掉就好了，反正也是透明的，然后根据bottom的长度你就可以变换出各种各样的三角形啦。

关于CSS的图形还有很多，比如画一个"❤"，或者一个"→"等等，先自己尝试一下，画不出来可以多看看tricks （https://css-tricks.com/examples/ShapesOfCSS/ ），一个神奇的CSS网站。