今天在练习使用CSS来制作一颗圣诞树时,发现了原来border不是由四个矩形边框拼接而成,而是由形梯形组合而成的。(虽然记得以前老师好像讲过,但是迷迷糊糊的,不是很理解原理)。正好今天遇到此题,就上网查找了一下。
实现三角形的效果:
![](https://i-blog.csdnimg.cn/blog_migrate/8ac0297c069155641e9d1d7831b6edfe.png)
实现的代码:
<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;
}
代码编写过程:
首先制作一个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;
}
![](https://i-blog.csdnimg.cn/blog_migrate/8167c1a352fd4682751751bcf5645947.png)
div的宽度和高度就是里面白色盒子的。这时就可以看出,border是由四个梯形盒子组成的。
接着设置盒子的宽度和高度都为0。
![](https://i-blog.csdnimg.cn/blog_migrate/76b86712952747c692d5ce130013966d.png)
此时就是四个三角形了。如果此时我们需要的是最下面的,就让其余的三角形的颜色改为透明就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;
}
![](https://i-blog.csdnimg.cn/blog_migrate/d1ad578bfb895fc87db7d27aa32cf07e.png)
制作完成!
但是此时的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;
}
![](https://i-blog.csdnimg.cn/blog_migrate/8c5da370323707df852a0dfa1ee3cf72.png)
此时上方的空间就没有了。
//注释,上方代码都可以简化,只是我认为这样更方便我们理解!
练习1:
绘制下方的图形。
![](https://i-blog.csdnimg.cn/blog_migrate/37f6aaef61255d2c5a86cb25dc02aac5.png)
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;
}
![](https://i-blog.csdnimg.cn/blog_migrate/65c7e2f4c089ae2b1caa46b7fa24688b.png)
接着,设置宽高为0,蓝色变为透明。
div {
width:0px;
height:0px;
border-top:100px solid red;
border-left:100px solid transparent;
}
![](https://i-blog.csdnimg.cn/blog_migrate/0845532c4e7dccfc9ec2b610b3f528af.png)
就出现了现在的效果!
练习2:
绘制圣诞树。
![](https://i-blog.csdnimg.cn/blog_migrate/902613f472519c51eb84eb91846c07d8.png)
<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;
}