html5绘制基本图形代码,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{

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 50px solid red;

}

//html

三角形

利用这种方式可以绘制出各种方向的三角形，包括直角三角形。具体用法可以参考http://www.jb51.net/article/42513.htm

5.等边三角形

思路是利用三个div的边框来拼成一个三角形，只需要调整好左右两个div的旋转角度，就能生成一个等边三角形。后来发现可以使用伪类来实现三个div的效果。代码如下：

// css

.box{

border-bottom:1px solid #030303;

width:100px;

height:100px;

margin: 0 auto;

box-sizing: border-box;

position: relative;

}

.box:before,.box:after{

content:"";

display: block;

width:100px;

height:100px;

box-sizing: border-box;

position: absolute;

}

.box:before{

border-left:1px solid #030303;

transform-origin: left bottom;

transform: rotate(30deg);

}

.box:after{

border-bottom:1px solid #030303;

transform: rotate(60deg);

transform-origin: right bottom;

}

//html

等边三角形

6.平行四边形

一种思路是使用一个矩形的div和两个三角形拼接来形成平行四边形，当然可以使用伪类，这样就不用使用三个元素了。

另一种是使用skew属性。

举个栗子：

//css

.parallelogram {

display: inline-block;

padding: 50px 100px;

border: 1px solid black;

transform: skew(-20deg);

}

//html

平行四边形

关于CSS绘制简单图形就先说到这里，如果以后有其他有意思的图形或者绘制方式再和大家分享~~