CSS三角形和圣诞树

最新推荐文章于 2024-03-29 08:47:36 发布

无声有寒

最新推荐文章于 2024-03-29 08:47:36 发布

阅读量228

点赞数

分类专栏： CSS练习文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_33651064/article/details/125137731

版权

CSS练习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.三角形的本质是盒子长宽都是0，边框X切成四个区域,哪个区域显示，就把那个区域的颜色设置一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            /* 1.将盒子的宽和高都设为0 */
            width: 0;
            height: 0;
            /* 2.设置边框宽度，这里的100px是盒子中心的尖尖到边的距离。并将所有边框的颜色都透明 */
            border: 100px solid transparent;
            /* 3.需要哪个三角形就设置哪边的颜色 */
            border-bottom-color: green;
        }

        
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

在这里插入图片描述

2.圣诞树
FED76

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .topbranch {
                width: 0px;
                height: 0px;
                /*
                * TODO: 上枝叶效果
                */
                border: solid 100px transparent;
                border-bottom-color: green;
                float:left;
                margin-left: 100px; 
                
            }
            .middleBranch {
                width: 0px;
                height: 0px;
                /*
                * TODO: 中枝叶效果
                */
                border: solid 200px transparent;
                border-bottom-color: green;
        
                
            }
            .base {
                /*
                * TODO: 树干效果
                */
                width: 70px;
                height: 200px;
                background-color: gray;
                margin-left: 165px;
            }
        </style>
    </head>
    <body>
    	<section class="topbranch"></section>
        <section class="middleBranch"></section>
        <section class="base"></section>
    </body>
</html>

这里最上面的盒子设置浮动可以脱标，让下面的三角形挤上来，正好看上去连起来了。
盒子2的边框宽是100px，正方形是200200.
盒子2的边框宽是200px，正方形是400400。
所以看上去正好卡在一起。
在这里插入图片描述
树干就很简单，先右移动200px，再回去半个树干，所以是200-35=165.