CSS控制border畫一棵小樹

weixin_33782386發表於2017-07-18
CSS

程式碼實現

<!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>

相關文章