对于学习前端的童鞋，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. net core 安装web模板

    ---恢复内容开始--- 今天想试试在Linux用C#开发WebAPI,查了下,要用: dotnet new -t Web 来建立工程,结果我试了下,出来这段: Invalid input switc ...

  2. OpenShift中的持续交付

    上一文中讲述了如何在AWS下搭建OpenShift集群.这篇文章将目光转向如何在OpenShift中实现CI/CD以及产品环境的部署. 持续交付 如果要打造一个持续交付的流水线,首先要考虑多环境的问题 ...

  3. Struts 2.5 Filter mapping specifies an unknown filter name [struts2]

    问题一:java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Failed to start ...

  4. jquery实现点击div外隐藏div

    html <div style="width:100px;height:100px;border:1px solid #ff0" id="div"> ...

  5. 日期小demo

    有个项目需求是做个在日期上选择的,就是这种: 网上看了几个日期的demo都太厚重了,移植起来太麻烦,然后打算自己写. 就先写个简化的demo看看,主要有几个关键点: 首先要根据当前日期获取这个月有几天 ...

  6. BZOJ-1050-[HAOI2006]旅行comf（并查集）

    Description 给你一个无向图,N(N<=500)个顶点, M(M<=5000)条边,每条边有一个权值Vi(Vi<30000).给你两个顶点S和T,求 一条路径,使得路径上最 ...

  7. Oracle第一波

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  8. Hive简记

    在大数据工作中难免遇到数据仓库(OLAP)架构,以及通过Hive SQL简化分布式计算的场景.所以想通过这篇博客对Hive使用有一个大致总结,希望道友多多指教! 摘要: 1.Hive安装 2.Hive ...

  9. hdu 4778 Gems Fight! 状态压缩DP

    Gems Fight! Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 327680/327680 K (Java/Others)T ...

  10. GCD hdu1695容斥原理

    GCD Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...