Tips:点此可运行HTML源码

多彩DIV(三角形DIV的变幻)

canrun

复制代码
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 
 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6 <title>css border 三角形</title>
 7 <style>
 8 #test1 {
 9     width:0;
10     border-color:red yellow green blue ;
11     border-style:solid;
12     border-width:100px 100px 100px 100px ;
13 }
14 #test2 {
15     *width:0;
16     border-color:red yellow green blue ;
17     border-style:solid;
18     border-width:100px 100px 100px 100px ;
19 }
20 #test3 {
21     width:0;
22     border-color:red yellow green blue ;
23     border-style:solid;
24     border-width:0px 100px 100px 100px ;
25 }
26 #test4 {
27     width:0;
28     border-color:red yellow green blue ;
29     border-style:solid;
30     border-width:100px 0px 100px 100px ;
31 }
32 #test5 {
33     width:0;
34     border-color:red yellow green blue ;
35     border-style:solid;
36     border-width:100px 100px 0px 100px ;
37 }
38 #test6 {
39     width:0;
40     border-color:red yellow green blue ;
41     border-style:solid;
42     border-width:100px 100px 100px 0px ;
43 }
44 #test7 {
45     width:0;
46     border-color:red yellow green blue ;
47     border-style:solid;
48     *border-width:100px 100px 100px 100px ;
49 }
50 
51 #test8 {
52     width:0;
53     border-color:red yellow transparent blue ; *transparent 表示透明;
54     border-style:solid;
55     *border-width:100px 100px 100px 100px ;
56 }
57 .clr {
58     height:10px;
59 }
60 </style>
61 </head>
62 <body>
63 <div id="test1"></div>
64 
65 <div class="clr"></div>
66 
67 <div id="test2"></div>
68 
69 <div class="clr"></div>
70 
71 <div id="test3"></div>
72 
73 <div class="clr"></div>
74 
75 <div id="test4"></div>
76 
77 <div class="clr"></div>
78 
79 <div id="test5"></div>
80 
81 <div class="clr"></div>
82 
83 <div id="test6"></div>
84 
85 <div class="clr"></div>
86 
87 <div id="test7"></div>
88 
89 <div class="clr"></div>
90 
91 <div id="test8"></div>
92 
93 <a href="http://www.pigzz.com/201102/022TY42011.html">（转）小猪站长学院</a>
94 
95 关联文章推荐：纯CSS打造兼容各种浏览器的几何图形
96 </body>
97 </html>
复制代码
posted @   Zjmainstay  阅读(343)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
SQL AI 助手