纯CSS画图

结合其它地方看到的和自己常用的整理一下。

  1. 圆

     
    1 #circle
2 {
3   width:100px;
4   height:100px;
5   background-color:#0099FF;
6   border-radius:50px;
7   -webkit-border-radius:50px;
8   -moz-border-radius:50px;
9 }

    思路：新建一个正方形的层，设置其四个角的圆角值为边长的一半。

  2. 椭圆

     
    1 #circle
2 {
3   width:200px;
4   height:100px;
5   background-color:#0099FF;
6   border-radius:100px/50px;
7   -webkit-border-radius:100px/50px;
8   -moz-border-radius:100px/50px;
9 }

    语法：

    1 border-radius: 1-4 length|% / 1-4 length|%;

    注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

    思路：新建一个长方形的层，长边一侧的四个圆角值为长边的一半，短边一侧的四个圆角值为短边的一半。

  3. 等腰三角形

     
    1 width:0;
2 height:0;
3 border-left:50px solid transparent;
4 border-right:50px solid transparent;
5 border-bottom:100px solid #0099FF;

    思路：新建一个层，不需要且强制设置其宽高为0，设置两腰为透明，底边有颜色

  4. 直角三角形

     
    1 width:0;
2 height:0;
3 border-top:100px solid #0099FF;
4 border-right:100px solid transparent;

    思路：新建一个层，不需要且强制设置其宽高为0。根据需要选div相邻的两条边，设置border的时候，其宽度相等，一条边有颜色，一条边为透明。

  5. 平行四边形

     
    1 width:150px;
2 height:100px;
3 background-color:#0099FF;
4 -webkit-transform:skew(20deg);
5 -moz-transform:skew(20deg);
6 -o-transform:skew(20deg);

    注意事项：transform的使用及其常用属性：rotate(),skew(),scale(),translate()

    思路：新建一个有背景颜色的矩形层，然后使用transform:skew(20deg)使矩形倾斜。

  6. 不规则图形

     1 #shape1
 2 {
 3     position: absolute;
 4 }
 5 .shape-rectangle
 6 {
 7     width: 90px;
 8     height: 40px;
 9     background-color: #FF6600;
10     border-color: #FF6600;
11     box-shadow: 0 5px 2px #888;
12 }
13 
14 .shape-triangle
15 {
16     width: 50px;
17     height: 50px;
18     margin-left: 87px;
19     overflow: hidden;
20 }
21 
22 .media-title
23 {
24     box-shadow: 0 5px 2px #888;
25     width: 30px;
26     height: 30px;
27     background-color: #FF6600;
28     transform: rotate(-45deg);
29     -ms-transform: rotate(-45deg);
30     -moz-transform: rotate(-45deg);
31     -webkit-transform: rotate(-45deg);
32     -o-transform: rotate(-45deg);
33     margin-top: 4px;
34     position: absolute;
35     right: 35px;
36 }

    思路：将该形状分成一个矩形和一个三角形。三角形可以用之前的方法画，也可以用这里的方法画：http://www.daqianduan.com/4721.html

未完待续...

posted @ 2015-04-13 20:21  SE7ENs  阅读(391)  评论(0)    收藏  举报