实战画一个圣诞树

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            padding: 0px;

            margin: 0 auto;

        }

        .box{

            width: 0px;

            height: 0px;

            /*transparent设置为透明色*/

            border: 50px solid transparent;

            border-bottom-color: yellow;

            border-top: 0 none;

        }

        .box1{

            width: 0px;

            height: 0px;

            /*transparent设置为透明色*/

            border: 100px solid transparent;

            border-bottom-color: yellow;

            border-top: 0 none;

        }

        .box2{

            width: 0px;

            height: 0px;

            /*transparent设置为透明色*/

            border: 200px solid transparent;

            border-bottom-color: yellow;

            border-top: 0 none;

        }

        .box3{

            width: 50px;

            height: 200px;

            /*transparent设置为透明色*/

            background-color: red;

            border: 0 none;

        }

    </style>

</head>

<body>

    <div class="box"></div>

    <div class="box1"></div>

    <div class="box2"></div>

    <div class="box3"></div>

</body>

</html>

学习微信小程序之css8的更多相关文章

  1. 与大家分享学习微信小程序开发的一些心得

    因为我也才开始学习微信小程序不久,下文也是现在的一时之言,大家有不同的想法也可以在评论里共同交流讨论,希望文章能给大家提供一点点帮助. 最近接触到了一些前端框架,像Vue.js,React,发现小程序 ...

  2. 一个C#程序员学习微信小程序路由的笔记

    路由大家应该都知道,在微信小程序也是有的,毕竟它是单页面应用程序.在WeChat中有五种跳转方式,分别是wx.switchTab.wx.reLaunch.wx.redirectTo.wx.naviga ...

  3. 新人学习微信小程序开发之框架篇

    大家好我是智哥,一名专注于前端领域的一名码农. 咱们今天主要来说说微信小程序, 最近一段时间微信群里的小程序,小游戏各种分享是突然一下子就爆发了,现在来看小程序作为微信的重磅功能无疑又是下一个风口.咱 ...

  4. 一个C#程序员学习微信小程序的笔记

    客户端打开小程序的时候,就将代码包下载到本地进行解析,首先找到了根目录的 app.json ,知道了小程序的所有页面. 在这个Index页面就是我们的首页,客户端在启动的时候,将首页的代码装载进来,通 ...

  5. 学习微信小程序及知识占及v-if与v-show差别

    注意点: 一.接口调用方式: getOpenid: function () { var that = this; return new Promise(function (resolve, rejec ...

  6. 从零开始学习微信小程序

    1.微信公众号和小程序的区别 公众号可以基于html5.vue.react.anguar开发,小程序只能用小程序开发语言. 小程序更接近于原生app. 借助jssdk调用手机功能强大. 开始: 2.创 ...

  7. 学习微信小程序

    1.从小程序指南文档开始看起:小程序指南 2.开发者工具下载:小程序开发工具

  8. 学习微信小程序之css11内外边距集合

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 重新学习微信小程序

    基础学习: 传送门:http://www.jianshu.com/p/1cec15a81722 这个简书博客介绍的很详细,今天思思重新学习了一下. 一路到最后只遇到一个坑,还是自己不仔细.这里记录下: ...

随机推荐

  1. excel工具类

    excel工具类 import com.iport.framework.util.ValidateUtil; import org.apache.commons.lang3.StringUtils; ...

  2. jQuery知识点二 实现隔行变色

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  3. .htaccess基本语法和应用 (2012-11-09 16:13:47)转载▼

    htaccess基本语法和应用 (2012-11-09 16:13:47) 转载▼ 标签:  htaccess it 分类: 网络 .htaccess是Apache服务器的一个非常强大的分布式配置文件 ...

  4. Android开发加快sdk更新速度

    1.在:\Windows\System32\drivers\etc目录下找到host文件,不能再这个目录修改host文件,需要先拷贝到桌面 然后把一下地址添加到host文件的最末尾 203.208.4 ...

  5. MySQL 备份与恢复

    一.备份/恢复策略 考虑因素有: (A) 表的存储引擎是否事务性的,在数据一致性方面不太一样. (B) 确定是全备份还是增量备份, (C) 考虑采取复制的方法做异地备份,复制不能代替备份 (D) 定期 ...

  6. Mongo基础使用，以及在Express项目中使用Mongoose

    MongoDB的基本使用 MongoDB特点: 使用BSON存储数据 支持相对丰富的查询操作(相对其他nosql数据库) 支持索引 副本集(支持多个实例/多个服务器运行同个数据库) 分片(数据库水平扩 ...

  7. 高性能MySQL（二）：创建高性能索引

    ) not null); insert into city_demo(city) select city from city insert into city_demo(city) select ci ...

  8. 用任务计划管理计划任务对付任务计划-禁止WPS提示升级

    作为一名至今还在坚守着64位XP的XP用到死星人,因为准备升级电脑,所以准备移民外星,开始使用Windows7.其实我新电脑买来一年了,为了坚守XP,扔在一边没有装(华硕Z9PE-D8 WS主板,双E ...

  9. 汗，Google又调整了编译工具(升级SDK先备份!!!)

    1./tools 下的apkbuilder消失了 方法一.用老版本ADT中的apkbuilder(apkbuilder.bat--windows) 方法二.重新生成build.xml文件 2.aapt ...

  10. 小众Tox——大众的“去中心化”聊天软件

    ★Tox是什么 一个反窥探的开源项目:一种基于DHT(BitTorrent)技术的即时通讯协议:一个为安全而生的加密通讯系统 .美国棱镜计划曝光后,一个名为 irungentoo 的牛人于17天后的2 ...