欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

用css属性画出一棵圣诞树的方法

程序员文章站 2022-03-01 17:15:44
...
对于学习前端的童鞋,css的掌握是必须的。今天就来实现用css画出一棵圣诞树。

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

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

用css属性画出一棵圣诞树的方法

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

用css属性画出一棵圣诞树的方法

创建第一个三角形:

用css属性画出一棵圣诞树的方法

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

修改css属性得到三角形:

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

用css属性画出一棵圣诞树的方法

然后用p区域做树干:用css属性画出一棵圣诞树的方法

最终效果:

用css属性画出一棵圣诞树的方法

以上就是用css属性画出一棵圣诞树的方法的详细内容,更多请关注其它相关文章!