CSS3绘制图形基本原理

一、如何使用CSS3来绘制图形？

网络上经常能够看到一些用CSS3绘制的精致图形，它们通常由矩形，圆形，椭圆，三角形,梯形等组合而成。要想绘制我们自己的图形，就要先了解下基本图形的绘制方法了。

一个display：block的元素设定宽高之后表现为矩形。通过设定border-radius可以得到圆角矩形，圆形和椭圆形。

image

在使用border-radius时，有几点可能需要注意一下：

1. border-radius，可以分别对4个角进行设定。 例如上图：border-top-left-radius: apx bpx;
2. border-xxx-xxx-radius的两个值分别代表着椭圆长轴和短轴长度的一半，通常简写的时候例如border-top-left-radius: 10px;(border-top-left-radius:10px 10px;) 表明长轴和短轴的长度均为20px，也就是半径为10px的圆形（圆角部分）。
3. 当使用百分比数值时，a 相对于width， b相对于height

如果a == width/2, b == height/2，结果就是一个椭圆，与此同时a==b，那么就可以得到一个半径为a的圆形了。

在看三角形之前，首先看看三角形的“绘制者”border，下面的例子：

image

.test{
    border: 20px solid;
    border-top-color:#ff0000;
    border-right-color:#00ff00;
    border-bottom-color:#0000ff;
    border-left-color:#FFFF00;
    width:100px;
    height: 100px;
    background: #272822;
}

将每个boder的颜色值设为不一样，就可以清楚的看到每个border的负责区域，有三角形的雏形了。其实，绘制三角形的原理很简单，如下图

image

我们可以这样去理解一个border所代表的区域，那就是“三角形x2 + 矩形”，以border-bottom为例，矩形 = width x ( border-bottom-width )

相邻的border交叉的区域构成一个矩形，每个border各负责一半，一个直角三角形。只要将其中的一个border的颜色值设为transparent或者背景色，从视觉上就可以得到一个直角三角形了。

• 三角形1 = border-left-width x border-bottom-width
• 三角形2 = border-right-width x border-bottom-width

当 width = 0 （height = 0, border-left || border-right）时，我们通过调整border的宽度可以将这两个直角三角形拼接成任意形状的三角形，或者调整width(height)等获得一个梯形，当然梯形也可以通过拼图得到，这样不是更简单吗？。Transform中旋转将为我们提供更多的灵活变化。

本文来自