css画三角形

效果图:

 

 

 代码:

 1 <html>
 2 <head>
 3 <title>三角形</title>
 4 </head>
 5 <style>
 6 .div1{
 7     width:0;
 8     height:0;
 9     background:red;
10     float:left;
11     border-bottom:100px solid #f40;
12     border-left:100px solid #fff;
13     border-right:100px solid #fff;
14     border-top:100px solid #fff;
15 }
16 .div2{
17     width:0;
18     height:0;
19     float:left;
20     background:red;
21     border-bottom:100px solid #fff;
22     border-left:100px solid green;
23     border-right:100px solid #fff;
24     border-top:100px solid #fff;
25 }
26 .div3{
27     width:0;
28     height:0;
29     float:left;
30     background:red;
31     border-bottom:100px solid #fff;
32     border-left:100px solid #fff;
33     border-right:100px solid #fff;
34     border-top:100px solid gray;
35 }
36 .div4{
37     width:0;
38     height:0;
39     float:left;
40     background:red;
41     border-bottom:100px solid #fff;
42     border-left:100px solid #fff;
43     border-right:100px solid blue;
44     border-top:100px solid #fff;
45 }
46 </style>
47 <body>
48 <div class="div1"></div>
49 <div class="div2"></div>
50 <div class="div3"></div>
51 <div class="div4"></div>
52 </body>
53 </html>

实现思路:

将div标签的height和width值设为0,为div设置不为零的border值。

边框分为上下左右,以对角线划分,故可以的得到三角形。

posted @ 2019-09-27 20:28  嚼着炫迈去追梦  阅读(26)  评论(0编辑  收藏
人家故里