你的位置:首页 > 软件开发 > 网页设计 > 用css属性画出一棵圣诞树

用css属性画出一棵圣诞树

发布时间:2017-10-20 16:00:26
对于学习前端的童鞋,css的掌握是必须的。今天就来实现用css画出一棵圣诞树。主要练习的是css里面border的练习与掌握程度。在body创建一个主区域<div></div>:我们用border搭建的三角形在主区域内。改主区域的背景色:可以给设定一个高度 ...

 

 

对于学习前端的童鞋,css的掌握是必须的。今天就来实现用css画出一棵圣诞树。

主要练习的是css里面border的练习与掌握程度。

在body创建一个主区域<div></div>:我们用border搭建的三角形在主区域内。

用css属性画出一棵圣诞树

改主区域的背景色:可以给设定一个高度

用css属性画出一棵圣诞树

 

创建第一个三角形:

用css属性画出一棵圣诞树

 

用css属性画出一棵圣诞树这里的每个区域代表一个矩形,然后通过修改矩形得到三角形

修改css属性得到三角形:

用css属性画出一棵圣诞树这里的width和height其实就是内侧border的长度,然后分别设置border上下左右的属性,用transparent隐藏不需要展示的border。

用css属性画出一棵圣诞树

然后用div区域做树干:用css属性画出一棵圣诞树

最终效果:

 用css属性画出一棵圣诞树

 

原标题:用css属性画出一棵圣诞树

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。