zoukankan      html  css  js  c++  java
  • 2019.7.10盒子模型造树

    造树代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>盒子模型的趣味案例</title>
    <style>
    .box{
    600px;
    border: 1px solid black;
    /*外边距的特殊用法 ,将宽度小于父元素的元素放到父元素的中间*/
    margin: 10px auto;
    }
    .top{
    0;
    height:0;
    border-bottom: 50px solid green;
    /*设置边框透明色*/
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    margin: auto;
    }
    .middle{
    0;height: 0;
    border-bottom: 100px solid green;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    margin: auto;
    }
    .bottom{
    0;height: 0;
    border-bottom: 150px solid green;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    margin: auto;
    }
    .tree{
    50px;
    height: 300px;
    background-color: green;
    margin: auto;
    }
    </style>
    </head>
    <body>
    <div class="box">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"> </div>
    <div class="tree"></div>
    </div>
    </body>
    </html>

    分析:

    个盒子,宽度高度都为0,设置另外三边的边框,name自然称起了一个三角形

  • 相关阅读:
    vue报错 error: data.push is not a function
    vue elment.style样式修改(第三方组件自生成元素)
    按元素标签查询多个
    按css查询多个元素
    按CSS查询一个元素
    查询单个元素
    JavaScript 查找元素
    Spring 商品分类
    Spring 使用日志
    Spring 使用日期类型
  • 原文地址:https://www.cnblogs.com/awei313558147/p/11180781.html
Copyright © 2011-2022 走看看