用css绘制图形,纯 CSS 绘制各种基本图形

最近被问到如何用CSS绘制一个圆，解决这个问题的同时引发了我对CSS绘制图形的兴趣。今天汇总一下CSS绘制的各种基本图形。

1.正方形

正方形是最简单的图形了，只需要宽高一致就可以绘制出来。

// css

.square{

width: 100px;

height: 100px;

border: 1px solid black;

}

//html

正方形

2.圆形

圆形主要用到了border-radius属性。该属性可以控制圆角的形状。该属性是四个属性的集合，和padding类似。

举个栗子：

border-radius: 2px;

等同于：

border-top-left-radius:2px;

border-top-right-radius:2px;

border-bottom-right-radius:2px;

border-bottom-left-radius:2px;

//css

.circle{

width: 100px;

height: 100px;

border-radius: 50%;

border: 1px solid black;

}

//html

圆形

3.椭圆形

椭圆形也是利用了border-radius属性，只是使用了两个值分别指定x轴和y轴的弯曲情况。

border-radius: 50% / 50%;

前一个值指定x轴，后一个值指定y轴。如果第二个值为空会使用第一个值。利用这两个值可以画出不同曲率的椭圆。

//css

.oval{

width: 150px;

height: 100px;

border-radius: 75px / 50px;

border: 1px solid black;

}

//html

椭圆

4.普通三角形

利用transparent设置两条边框为透明，一条有边框。最后的一条边不设置宽度，就形成了三角形。说着糊涂，直接show code：

```

//css

.triangle{