css画圣诞树

最新推荐文章于 2022-12-23 15:14:57 发布

雙安

最新推荐文章于 2022-12-23 15:14:57 发布

阅读量1.2k

点赞数

分类专栏： HTML/CSS

本文链接：https://blog.csdn.net/xiongwanfeng/article/details/74852562

版权

HTML/CSS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css控制border画圣诞树</title>
    <style type="text/css">
        div{
            /*此处的画布宽要结合盒子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>
    <div>
        <div id="header"></div>
        <div id="main"></div>
        <div id="footer"></div>
    </div>
</body>
</html>

雙安

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
css画圣诞树

css控制border画圣诞树 div{ /*此处的画布宽要结合盒子border的厚度至少为200比较美观*/ width: 200px; background: white; } #header{ width: 0px;
复制链接

扫一扫

专栏目录