CSS 绘制特殊图形

先来绘制一个简单基础容器

示例1

示例2

从示例1 和 示例2（通过把示例1的宽高设置为0得到）可以看出，容器的 border 是由三角形组成，由此可以得知在绘制一些特殊图形时可以通过控制 border来进行特殊图形的绘制，比如：等腰三角形、直角三角形、梯形...

得到一个等腰三角形：

等腰三角形

从此控制边框颜色，我们可以得到以下各种图形：

image.png

从上可以看出，通过控制容器边框和宽高，可以绘制出各种特殊图形。

接下来，我们来绘制各种圆形相关图形：

image.png

圆形

椭圆形

绘制椭圆边框圆弧需要符合宽高各一半的原则。

绘制椭圆