美文网首页
CSS控制border画一棵小树

CSS控制border画一棵小树

作者: Cytosine | 来源:发表于2017-07-18 21:21 被阅读0次

    代码实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title></title>  
    <style type="text/css">  
        #container{  
            width: 300px;  
            background: gray;  
        }  
      
        #trip1{  
            width: 00px;  
            margin-left: 20px;  
      
            border-right-width: 100px;  
            border-right-style: solid;  
            border-right-color: gray;  
      
            border-bottom-width: 100px;  
            border-bottom-style: solid;  
            border-bottom-color: green;  
      
            border-left-width: 100px;  
            border-left-style: solid;  
            border-left-color: gray;  
        }  
      
        #trip2{  
            width: 00px;  
      
            border-right-width: 120px;  
            border-right-style: solid;  
            border-right-color: gray;  
      
            border-bottom-width: 120px;  
            border-bottom-style: solid;  
            border-bottom-color: green;  
      
            border-left-width: 120px;  
            border-left-style: solid;  
            border-left-color: gray;  
        }  
      
        #tang{  
            background: brown;  
            width: 40px;  
            height: 150px;  
            margin-left: 100px;  
        }  
    </style>  
    </head>  
    <body>  
    <div id="container">  
        <div id="trip1"></div>  
        <div id="trip2"></div>  
        <div id="tang"></div>  
    </div>  
    </body>  
    </html>  
    

    相关文章

      网友评论

          本文标题:CSS控制border画一棵小树

          本文链接:https://www.haomeiwen.com/subject/dexkkxtx.html