实战画一个圣诞树

<!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. c语言一些知识点的记录

    1.extern关键字 extern关键字可以置于变量或者函数前面,用于告诉编译器此变量或函数定义于其他的模块.

  2. df命令

    http://www.th7.cn/system/lin/201311/46839.shtml http://www.111cn.net/sys/CentOS/86335.htm

  3. CSS清浮动处理（Clear与BFC）

    在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼 1 浮动带来布局的便利,却也带来了新问题 <!doctype html> <h ...

  4. Intellij Idea/Webstorm/Phpstorm 的高效快捷键

    1. shift + F6可以理解为F2的豪华重量版,不但可以重命名文件名,而且可以命名函数名,函数名可以搜索引用的文件,还可以重命名局部变量.还可以重命名标签名.在sublime text中有个类似 ...

  5. 【WP8.1】类似“IT之家” 自定义消息 的实现

    曾经在WP7.WP8下的消息 使用的都是Coding4Fun.Phone.Toolkit里面的ToastPrompt类来实现的. 现在我们来自己做个类似IT之家的这种效果:从右边弹出,经过几秒后会自动 ...

  6. spring拦截器排除 静态资源

    拦截器需要排除静态资源,不然会造成资源浪费 <!-- 拦截器 --> <mvc:interceptors> <!-- 使用bean定义一个Interceptor,直接定义 ...

  7. Swift3.0P1 语法指南——继承

    原档:https://developer.apple.com/library/prerelease/ios/documentation/Swift/Conceptual/Swift_Programmi ...

  8. Stm32F107VCT6硬件资源

    一直在用stm32系列的单片机,最近因为需要使用到以太网,所以采用了stm32f107vc这款芯片.对于存储资源一直不是非常清楚,今天专门到官网看了一下. 如下: RAM------>64kB ...

  9. Linux学习之四--Nginx

    关于Nginx的 nginx的是一个高性能的Web服务器的软件.它比Apache HTTP服务器更加灵活,重量轻的程序. 本教程将教你如何安装和你的CentOS 7服务器上启动Nginx的.   先决 ...

  10. js面向对象

    什么事面向对象 用对象的思想去写代码,就是面向对象编程 面向对象编程(OOP)的特点 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有对象上继承出新的对象 多态:多对象的不同形态 对象的 ...