用css画图标
css3的属性 transform(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate,旋转 rotate,扭曲 skew,放缩 scale),我做了一些平常常用的一些简单的图标。 这些图标很多是通过三角形来拼贴起来的,所以我们需要知道怎么样画三角形。 1. 我们要将该 div 的 width 和 height 都设置为 0,三角形是通过设置 border 来实现; 2. 通过我们需要画成的三角形的目标分析,这个三角形的朝向(只针对规则的朝向:上、右、下、左、上左、上右、下右、下左,不规则的朝向可以通过旋转来实现); 3. 如果是上、右、下、左四种中的一种,将朝向的对面的 border-color 设置为我们需要的颜色,该朝向的这一边不设置 border,其它两边的 border-color 设置为 transparent; 4. 如果是上左、上右、下右、下左中的一种,以上右为例,设置相关的两边:上和右的 border-color 设置成我们想要的颜色,其它两边的 border-width 设置成 transparent。 5. border-width 的值就是底边长和高。 看几个例子: 例1: 图形: 该图形中,只有上方位有边,这个边就是三角形的底边了,底边长为 3.6em(左右相加),高为 2em。右、下、左没有边。于是 border-top