2
回答
web前端-css运用border绘制三角形
利用AWS快速构建适用于生产的无服务器应用程序,免费试用12个月>>>   

第一步:绘制出一个小正方形

1、html代码

 <div class="ico">  </div>

2、css代码

.ico{ width:50px;height:50px; background:red;  }

产生结果:

第二步:给小正方形加上不同的边框颜色

1、css样式

 .ico{width:50px; height:50px;  background:red;  /*新增内容*/ border:20px solid blue;}

产生的结果:

第三步:给上边框单独加上一个颜色

1、css样式

.ico{width:50px;height:50px; background:red;   border:20px solid #6600ff;
	/*新增内容*/border-top:20px solid #000000;}

产生的结果:

第四步:把长方形的宽度和高度从原来的50px 改为0px

1、css样式

.ico{/*--修改部分*/width:0px; height:0px;  background:red;   border:20px solid #6600ff;	border-top:20px solid #000000;}

产生的结果:

第五步:把边框的颜色设置为透明的,只留上边框的颜色为黑色

1、css样式

.ico{width:0px;height:0px; background:red;   /*修改的样式*/border:20px solid transparent;;border-top:20px solid #000000;}

产生的结果:

解释:当边框变为transparent透明后,出现红色的区块,是因为我们在构建长方形时加红色的背景 background:red,最后一步,去掉background:red;就可以了

第六步:把background:red;去掉

.ico{width:0px;height:0px; /*background:red;*/   border:20px solid transparent;
	border-top:20px solid #000000;}

产生的结果:

终于一个完整的三角形制作出来了,写的步聚有点多,主要是想让大家看到这个三角形是如何演变而来的。

如果没有看懂,或有代码方面问题的,可以加私人QQ:564537488 来听我讲课吧

举报
小悦悦
发帖于5个月前 2回/178阅
顶部