在我们学习完css中的boder属性后,可能回想到css除了用来给我们的html骨架进行美化外,还有别的用处吗,答案是有的.(在画图中,我们主要是利用boder来画) 今天我们就来学习一下如何画一些基本图型:
1.正方形
<style>
.box{
width: 0px;
height: 0px;
border: 100px solid rgb(0, 255, 170);
}
</style>
<div class="box">
</div>
这个就是一个最简单的正方形的画法,
2.三角形
在我们要画三角形时,其实是先画一个正方形开始的.首先我们先来想一想我们一般是怎么把正方形平均分成4份的呢? 其实最简单的方法就是把正方形沿着它的对角线进行两次对折就可以了,当然在代码中我们不可能真的把盒子进行对折,我们一般是利用boder属性来进行分割,我们只需要让盒子的每条boder有不同的颜色就可以了
<style>
.box{
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid yellow;
border-bottom: 100px solid blue;
border-left: 100px solid green;
}
</style>
<div class="box">
</div>
那么通过这个我们可以看到这个正方形被四个三角形平均分割,那通过这个我们就可以联想到三角形的方法了,如果我们只给一条boder颜色其他的boder的颜色都为transparent(透明)的话那是不是三角形就出来了.
<style>
div {
width: 0;
height: 0;
border: 50px solid transparent;
border-right-color: red;
}
</style>
<div class="box"> </div>
当然我们如果要别的方向三角形的话我们只要把自己想要的方向的对立面的boder设置颜色就可以了,其他设置为透明色. 当然如果你不想要等腰直角三角形的话那我们就只用给不同的boder设置不同的长度就可以了.
<style>
.box{
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid yellow;
border-bottom: 200px solid blue;
border-left: 300px solid green;
}
</style>
<div class="box">
</div>
当然这个时候就不是正方形了,画三角形的方法是不变的.和画等腰三角形的画法是一样的.
