CSS学习笔记：利用border绘制三角形

在前端的笔试、面试过程中，经常会出现一些不规则图形的CSS设置，基本上多是矩形外加一个三角形。利用CSS属性可以实现三角形的生成，主要利用上下左右的边距的折叠。　

　

1、第一种图形：

 

 1 .box {
 2         width: 200px;
 3         height: 200px;
 4         -webkit-box-sizing:border-box;
 5         box-sizing:border-box;
 6         border-top: 50px solid #f00;
 7         border-left: 50px solid #ff0;
 8         border-bottom: 50px solid #0f0;
 9         border-right: 50px solid #00f;
10     }

 

2、第二种图形：

 1 .box1 {
 2         width: 0px;
 3         height: 0px;
 4         -webkit-box-sizing:border-box;
 5         box-sizing:border-box;
 6         border-top: 50px solid #f00;
 7         border-left: 50px solid #ff0;
 8         border-bottom: 50px solid #0f0;
 9         border-right: 50px solid #00f;
10     }

 

 

3、右上、右下、左上、左下三角形：

 1     /*右上三角*/
 2     .box2 {
 3         width: 0px;
 4         height: 0px;
 5         -webkit-box-sizing:border-box;
 6         box-sizing:border-box;
 7         border-top: 50px solid #f00;
 8         border-left: 50px solid #fff;
 9     }
10     /*右下三角*/
11     .box3 {
12         width: 0px;
13         height: 0px;
14         -webkit-box-sizing:border-box;
15         box-sizing:border-box;
16         border-left: 50px solid #fff;
17         border-bottom: 50px solid #f00;
18     }
19     /*左上三角*/
20     .box4 {
21         width: 0px;
22         height: 0px;
23         -webkit-box-sizing:border-box;
24         box-sizing:border-box;
25         border-top: 50px solid #f00;
26         border-right: 50px solid #fff;
27     }

 

4、上下左右三角形：

 1     /*上三角。下边距不设置影响位置*/
 2     .box6 {
 3         width: 0px;
 4         height: 0px;
 5         -webkit-box-sizing:border-box;
 6         box-sizing:border-box;
 7         border-top: 50px solid #f00;
 8         border-left: 50px solid #fff;
 9         /*border-bottom: 50px solid #f00;*/
10         border-right: 50px solid #fff;
11     }
12     /*下三角。上边距不设置影响位置*/
13      .box7 {
14         width: 0px;
15         height: 0px;
16         -webkit-box-sizing:border-box;
17         box-sizing:border-box;
18         /*border-top: 50px solid #fff;*/
19         border-left: 50px solid #fff;
20         border-bottom: 50px solid #f00;
21         border-right: 50px solid #fff;
22     }
23     /*左三角*/
24      .box8 {
25         width: 0px;
26         height: 0px;
27         -webkit-box-sizing:border-box;
28         box-sizing:border-box;
29         border-top: 50px solid #fff;
30         border-left: 50px solid #f00;
31         border-bottom: 50px solid #fff;
32         /*border-right: 50px solid #fff;*/
33     }
34     /*右三角*/
35      .box9 {
36         width: 0px;
37         height: 0px;
38         -webkit-box-sizing:border-box;
39         box-sizing:border-box;
40         border-top: 50px solid #fff;
41         /*border-left: 50px solid #f00;*/
42         border-bottom: 50px solid #fff;
43         border-right: 50px solid #f00;
44     }

 

posted @ 2015-04-15 13:05  春眠不觉晓  阅读(542)  评论(0)  编辑  收藏  举报