实战画一个圣诞树

<!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. [译]Object.getPrototypeOf

    原文 概要 返回指定object的prototype. 语法 Object.getPrototypeOf(object) 参数 object 要返回原型的对象. 描述 当object参数不是一个对象的 ...

  2. beaglebone black 烧写系统后释放空间。

    执行 ./opt/script/toolsgrow_partition.sh就能将2g的空间变为sd卡的大小,我的是8g,执行后就是7.7g

  3. Python购物车程序

    1.要求用户输入工资,然后打印购物菜单 2.用户可以不断的购买商品,直到钱不够为止 3.退出时格式化打印用户已购买的商品和剩余金额 salary = int(input("请输入你的工资:& ...

  4. java基础 常用组件

    几个常用组件: 在图形用户界面编程中,我们常常会提供用户登陆界面,比如登陆到会员管理系统,登陆到工资管理系统,仓库管理系统等,如下图我们就会用到: 1. 文本框(JTextField) 2. 密码框( ...

  5. 几个常用的Linux命令

    最近在学习Linux,记录了几个命令如下: 首先认识:关机命令,我喜欢用的是:shutdown -h now ,当然还有init 0等命令(用自己习惯的);重启命令:reboot;注销命令:logou ...

  6. C# HttpWebReqeust和HttpWebResponse发送请求

    var request = (HttpWebRequest)WebRequest.Create("URL"); var data = Encoding.UTF8.GetBytes( ...

  7. docker笔记

    安装...不说了 docker info 查看信息 docker pull ...拉取镜像 docker run -it [镜像名] 运行 docker ps查看当前运行的容器  docker ps ...

  8. SWFUpload多图上传、C#后端跨域传文件带参数

    前几天工作中用到了SWFUpload上传图片,涉及到跨域,因为前端无法实现跨域,所以只能把文件传到后端进行跨域请求,整理分享下. 效果图 前端 html部分 <!DOCTYPE html> ...

  9. Merge K Sorted Arrays

    This problem can be solved by using a heap. The time is O(nlog(n)). Given m arrays, the minimum elem ...

  10. 设计模式--装饰模式Decorate（结构型）

    一.装饰模式 动态地给一个对象添加额外的职责.就增加功能来说,装饰模式相比生成子类更为灵活.有时我们希望给某个对象而不是整个类添加一些功能. 二.UML图 1.Component(概念中提到的对象接口 ...