zoukankan      html  css  js  c++  java
  • 多彩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>
  • 相关阅读:
    MFC对话框编程四:输入焦点的传递
    lua笔记 一个C++调用lua函数的类的实现
    [置顶] 设计模式之享元模式
    扩展实现PHP Benchmark
    TLD如何运行OpenTLD(TLD_HY20121127)
    [Oracle] Kill Session 经验总结
    php 该如何获取从百度搜索进入网站的关键词
    php+js实现百度地图多点标注的方法
    laraveladmin 报错 Disk [admin] not configured, please add a disk config in `config/filesystems.php`....
    PHP获取当前页面的url
  • 原文地址:https://www.cnblogs.com/Zjmainstay/p/CSS_triangle_div.html
Copyright © 2011-2022 走看看