• DIV+CSS 小三角的做法与使用


    用DIV+CSS可以作出很多不同形状的角形;以下我只写了几个;CSS没有优化;是为了让大家看得更清一些;

    以下是一些小三角的形状:



    这是第一个小三角的写法:

    程序代码
    #com_a{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;border-bottom:10px solid #FFFFCC;}



    以下是一些小三角;可以举一反三;做出更多的;
    HTML代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>www.zishu.cn</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    /*zishu.cn*/
    *{ margin:0; padding:0; font-size:12px; font-family:Verdana, "宋体", Arial; line-height:1.8; list-style:none;}
    #info,#nav{ margin:50px; border:1px dashed #FF3300; background:#FFFFCC; padding:50px;}
    #info div{background:#FF0000; 0px; height:0px; overflow:hidden; margin-bottom:10px;}
    /*一些三角的写法*/
    #com_a{ border-top:10px solid #FFFFCC;border-left:10px solid #FFFFCC;border-bottom:10px solid #FF3300;}
    #com_b{ border-top:10px solid #FFFFCC;border-right:10px solid #FF3300;border-bottom:10px solid #FFFFCC;}
    #com_c{ border-top:10px solid #FFFFCC;border-right:10px solid #FF3300;border-bottom:10px solid #FFFFCC;border-left:10px solid #FF3300;}
    #com_d{ border-top:10px solid #FF3300;border-right:10px solid #FFFFCC;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}
    #com_e{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;}
    #com_f{ border-top:10px solid #FF3300;border-right:10px solid #FFFFCC;border-left:10px solid #FFFFCC;}
    #com_g{ border-right:10px solid #FFFFCC;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}
    #com_h{ border-top:10px solid #FF3300;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}
    #com_i{ border-top:10px solid #FF3300;border-right:10px solid #FF3300;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}
    </style>
    </head>
    <body>
    <div id="info">
    <h1>一些三角形的写法</h1>
      <div id="com_a"></div>
      <div id="com_b"></div>
      <div id="com_f"></div>
      <div id="com_g"></div>
      <div id="com_c"></div>
      <div id="com_d"></div>
      <div id="com_e"></div>
      <div id="com_h"></div>
      <div id="com_i"></div>

    </div>

    </body>
    </html>

    TraceBack:  http://www.zishu.cn/blogview.asp?logID=514&cateID=3

  • 相关阅读:
    浅谈线段树
    浅谈KMP
    20200729线上模拟题解
    20200727线上模拟题解
    声明
    tarjan--割点,缩点
    20201029模拟
    高精模板
    二分图--二分图的几种模型
    树的直径与树的重心
  • 原文地址:https://www.cnblogs.com/hdjjun/p/1223727.html
Copyright © 2020-2023  润新知