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

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

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

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

创建第一个三角形：

这里的每个区域代表一个矩形，然后通过修改矩形得到三角形

修改css属性得到三角形：

这里的width和height其实就是内侧border的长度，然后分别设置border上下左右的属性，用transparent隐藏不需要展示的border。

然后用div区域做树干：

最终效果：

用css属性画出一棵圣诞树的更多相关文章

  1. css如何画出类似原生的线条？

    做前端的程序猿特别是移动端的,都很头疼遇到一种情况就是需要div底部加一个线条但是 1px的效果很粗,跟设计案上的不符合. 我的一个伙伴查找出来的一个解决方法: 在需要加上的线条的地方加上一个div ...

  2. CSS画出的各种形状图

    利用CSS可以画出各种需要的图形目录[1]矩形[2]圆形[3]椭圆[4]直角三角形[5]正三角形[6]平行四边形[7]梯形[8]六角星[9]六边形[10]五角星简单图形 矩形div{ width: 1 ...

  3. 樱花的季节，教大家用canvas画出飞舞的樱花树

    又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我们先画出一棵 ...

  4. 情人节，教大家使用css画出一朵玫瑰花。

    情人节到了,给大家来一朵高端的玫瑰花. 在网上看到的一个canvas实现的玫瑰花,效果很好,但是代码被压缩过,也没有注释,看的云里雾里的. 今天我教大脚用CSS来实现一朵玫瑰花. 先看效果 首先我们画 ...

  5. 用HTML+CSS画出一个同心圆

    参加web前端校招的同学们经常会遇到这样的面试题:用HTML+CSS画出一个同心圆. 例如: 这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用. 1.html代码 <body> &l ...

  6. 35.在CSS中 只用一个 DOM 元素就能画出国宝熊猫

    原文地址:https://segmentfault.com/a/1190000015052653 感想: 真神奇! HTML code: <div class="panda" ...

  7. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  8. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  9. 用css画出三角形【转】

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

随机推荐

  1. SpringMVC HelloWorld实例开发及部署

    SpringMVC HelloWorld实例开发及部署 2017-01-24 目录 1 Tomcat及Eclipse Tomcat插件安装配置  1.1 Tomcat的安装  1.2 Eclipse ...

  2. Mybatis逆向生成Mapper文件

    本文参考博客 http://blog.csdn.net/for_my_life/article/details/51228098 1. 在resources根目录下添加generator.proper ...

  3. Angular - Templates(模板)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 在Angular中,模板是一个包含了Angular特定元素和属性的HTML.Angula ...

  4. Linux入门(7) 脚本

    1.宣告使用的shell为何 2.注明创建者 编写作用等 3.注释每一个功能函数 执行脚本 1.修改可执行权限 chmod 755 file.sh 2.sh file.sh 可以直接运行脚本 #!/b ...

  5. ZOJ 2002 Copying Books 二分 贪心

    传送门:Zoj2002 题目大意:从左到右把一排数字k分,得到最小化最大份,如果有多组解,左边的尽量小. 思路:贪心+二分(参考青蛙过河). 方向:从右向左. 注意:有可能最小化时不够k分.如     ...

  6. MVC中重写RoleProvider角色管理

    /* 数据表SQL脚本 if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[FK_UsersInRoles_Ro ...

  7. WPF加载程序集中字符串资源

    WPF资源 WPF资源使用其实的也是resources格式嵌入资源,默认的资源名称为"应用程序名.g.resources",不过WPF资源使用的pack URI来访问资源. 添加图 ...

  8. WPF DataGrid Custommization using Style and Template

    WPF DataGrid Custommization using Style and Template 代码下载:http://download.csdn.net/detail/wujicai/81 ...

  9. 深刻理解反射（Reflection)

    最近公司在搞自动化测试,由于版权问题,无法用 '录制脚本' 进行,也就没法用 VS 自带的 UITest 框架(蛋疼), 所以只能开源的 FlaUI 框架来搞了.其中不可避免的涉及到反射的应用,但自己 ...

  10. 通信技术：SSE设计方案（一）--- 前端Server-Sent Events概念讲解和基础类库完善发布

    好了,开篇还是要扯扯的,否则感觉这个技术讲的么有那么冻人,嗯,这个晚上是有点冷了,秋衣秋裤大家都该加起来了,反正我不帮你买,妹子除外,嘻嘻. 之前几篇博客,研究前端通信技术的第一层ajax技术,从最基 ...