对于学习前端的童鞋，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. PowerDesigner连接MySQL和逆向工程图

    0.写在前面的话 最近想梳理公司项目的表间关系,从项目后台管理系统的操作入手,以及代码的hibernate注解入手,都不算特别尽人意,于是最后还是鼓捣了一下PowerDesigner的逆向工程图,这样 ...

  2. python实例编写（3）--对话框，多窗口，下拉框，上传文件

    一.对话框: 例:点击百度的登录,弹出的小窗口 #coding=utf-8 from selenium import webdriver from time import sleep dr=webdr ...

  3. 使用cocos2d脚本生成lua绑定

    这几天要老大要求把DragonBones移到cocos2dx 3.0 里边,并且绑定lua使用接口.因为刚学lua,使用的引擎也刚从2.2改为3.0,各种不熟悉,折腾了好几天才弄完,有空了总结一下 这 ...

  4. Codeforces 858A. k-rounding 数论

    题目: 题意:输入n和k,找到一个最小的数,满足末尾有至少k个0和是n的倍数. 最小的情况 ans = n,最大的情况 ans = n*pow(10,k). 令 k = pow(10,k); 我们发现 ...

  5. Rectangles hdu2461容斥定理

    Rectangles Time Limit: 5000/4000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  6. 从头编写 asp.net core 2.0 web api 基础框架 (1)

    工具: 1.Visual Studio 2017 V15.3.5+ 2.Postman (Chrome的App) 3.Chrome (最好是) 关于.net core或者.net core 2.0的相 ...

  7. 学习如何看懂SQL Server执行计划（二）——函数计算篇

    二.函数计算部分 --------------------标量聚合--------------------/* 标量聚合-主要在聚合函数操作中产生 计算标量:根据行中的现有值计算出一个新值 流聚合:在 ...

  8. NSString与NSMutableString的浅拷贝与深拷贝

    浅拷贝:指针拷贝,指针与原指针地址相同,没有创建新的对象. 深拷贝:内容拷贝,创建了新的对象,指针地址与原对象的指针地址不同. NSString测试代码如下 打印结果如下(后面打印出的两个NSCFCo ...

  9. ZOJ2110 HDU1010 搜索 Tempter of the Bone

    传送门:Tempter of the Bone 大意是给一个矩阵,叫你是否可以在给定的可走路径上不重复地走,在最后一秒走到终点. 我用了两个剪枝,且称其为简直001和剪枝002,事实证明001不要都可 ...

  10. word遇到错误 使其无法正常工作 因此需要关闭word 是否希望我们立刻修复

    方法1: 网上找的方案: win10下按下快捷键win+R, 然后在里面输入 %appdata%\microsoft\templates ,确定,此时就会直接进入Word安装路径,在里面找到" ...