使用border属性绘制三角形

今天在练习使用CSS来制作一颗圣诞树时，发现了原来border不是由四个矩形边框拼接而成，而是由形梯形组合而成的。（虽然记得以前老师好像讲过，但是迷迷糊糊的，不是很理解原理）。正好今天遇到此题，就上网查找了一下。

1. 实现三角形的效果：

2. 实现的代码：

<div></div>

 div {
            width:0px;
            height:0px;
            border-top:100px solid transparent;
            border-bottom:100px solid lightblue;
            border-right:100px solid transparent;
            border-left:100px solid transparent;
        }

1. 代码编写过程：

• 首先制作一个div盒子,并设置样式

div {
            width:10px;
            height:10px;
            border-top:100px solid red;
            border-bottom:100px solid lightblue;
            border-right:100px solid green;
            border-left:100px solid blue;
        }

• div的宽度和高度就是里面白色盒子的。这时就可以看出，border是由四个梯形盒子组成的。

• 接着设置盒子的宽度和高度都为0。

• 此时就是四个三角形了。如果此时我们需要的是最下面的，就让其余的三角形的颜色改为透明就OK了。

div {
            width:0px;
            height:0px;
            border-top:100px solid transparent;
            border-bottom:100px solid lightblue;
            border-right:100px solid transparent;
            border-left:100px solid transparent;
        }

• 制作完成！

2. 但是此时的border仍然占据空间，需要将上border设置为0，就可以使得绘制的三角形最小化了。

div {
            width:0px;
            height:0px;
            border-top:0px solid transparent;
            border-bottom:100px solid lightblue;
            border-right:100px solid transparent;
            border-left:100px solid transparent;
        }

此时上方的空间就没有了。

//注释，上方代码都可以简化，只是我认为这样更方便我们理解！

3. 练习1：

绘制下方的图形。

div {
            width:0px;
            height:0px;
            border-top:100px solid red;
            border-left:100px solid transparent;
        }

解析练习1：

• 首先，先制作成下面的图形。

div {
            width:20px;
            height:20px;
            border-top:100px solid red;
            border-left:100px solid blue;
        }

• 接着，设置宽高为0，蓝色变为透明。

div {
            width:0px;
            height:0px;
            border-top:100px solid red;
            border-left:100px solid transparent;
        }

就出现了现在的效果！

4. 练习2：

绘制圣诞树。

 <div>
        <p class="topBranch"></p>
        <p class="middleBranch"></p>
        <p class="base"></p>
    </div>

.topBranch {
            margin:0 auto;
            width:0px;
            height:0px;
            border:100px solid green;
            border-color:transparent transparent green transparent;
        }
.middleBranch {
            margin:0 auto;
            margin-top:-200px;
            width:0px;
            height:0px;
            border:200px solid green;
            border-color:transparent transparent green transparent;
        }
.base {
            width:70px;
            height: 200px;
            background-color: grey;
            margin:0 auto;
        }