您现在的位置:首页 >> 前端 >> 内容

css画圣诞树

时间:2017/7/11 16:57:53 点击:

  核心提示:css画圣诞树方法教程:!DOCTYPE htmlhtmlheadmeta charset=utf-8titlecss控制border画圣诞树/titlestyle type=text/cssp{/*...
css画圣诞树方法教程:
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>css控制border画圣诞树</title>  
    <style type="text/css">  
        p{  
            /*此处的画布宽要结合盒子border的厚度 至少为200比较美观*/  
            width: 200px;  
            background: white;  
        }  
        #header{  
            width: 0px;  
            height: 0px;  
            border-top: 100px solid transparent;  
            border-right: 100px solid transparent;  
            border-bottom: 100px solid green;  
            border-left:100px solid transparent;  
        }  
        #main{  
            width: 0px;  
            height: 0px;  
            border-right: 100px solid transparent;  
            border-bottom: 100px solid green;  
            border-left:100px solid transparent;  
        }  
        #footer{  
            width: 10px;  
            height: 300px;  
            background: black;  
            margin-left: 95px;  
        }  
  
    </style>  
</head>  
<body>  
    <p>  
        <p id="header"></p>  
        <p id="main"></p>  
        <p id="footer"></p>  
    </p>  
</body>  
</html>  
css画圣诞树

Tags:CS SS S画 画圣 
作者:网络 来源:Winifred_1
  • 上一篇:HTML表单
  • 下一篇:css控制border画三角形