zoukankan      html  css  js  c++  java
  • 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值。

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

  • 相关阅读:
    结对开发----找出“水王"
    团队博客----典型用户分析
    结对开发----电梯调度(课堂练习)
    团队开发_需求分析
    站立会议02(二期)
    站立会议01(二期)
    《软件工程》课程改进意见
    站立会议07(一期)
    站立会议06(一期)
    站立会议05(一期)
  • 原文地址:https://www.cnblogs.com/fangmr/p/11600200.html
Copyright © 2011-2022 走看看