实战画一个圣诞树

<!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. Bubble Cup 8 finals E. Spectator Riots (575E)

    题意: 一个长宽是100000单位的球场上有很多暴动的观众,每个观众都有一个速度v, 在一秒内,观众会等概率地移动到与原位置的曼哈顿距离<=v的地方(不会移动到界外). 你需要选取三个位置,这三 ...

  2. 【学习笔记】JAva编程思想之多态

    1.如果java的基类拥有某个已被多次重载的方法名称,那么在导出类中重新定义该方法名称并不会屏蔽在基类的任何版本.因此,无论是在该层或者他的基类中对方法进行定义,重载机制都可以正常工作. 2.使用@O ...

  3. D3.js学习（三）

    上一节中,我们已经画出了图表,并且给图表添加了坐标轴的标签和标题,在这一节中,我们将要学习几个绘制线条不同特性的几个函数,以及给图表添加格栅.ok,进入话题! 如何给线条设置绘制的样式? 这个其实非常 ...

  4. PV、EV、AC、BAC、EAC、ETC等计算公式含义

    PV.EV.AC.BAC.EAC.ETC等计算公式含义 PV Planned Value:计划值 应该完成多少工作, (按照计划截止目前应该花费的预算) AC Actual Cost:实际成本, 完成 ...

  5. frp配置

    frps配置 --------------------------------------------------------------------------------------------- ...

  6. 修改Centos 6.5的yum源

    1.进入目录 cd /etc/yum.repos.d/ 2.保持副本 mv CentOS-Base.repo CentOS-Base.repo.backup 3.下载新的CentOS-Base.rep ...

  7. mac 下设置jdk 路径，设置hadoop 路径

    1. touch ~/.bash_profile  创建一个文件 2.vim ~/.bash_profile JAVA_HOME=/Library/Java/JavaVirtualMachines/j ...

  8. 云服务器 Centos7.0 部署

    CentOS安装jdk的三种方法 http://www.mamicode.com/info-detail-613410.html centos Linux下安装Tomcat和发布Java的web程序 ...

  9. 百度地图多点路径加载以及调整页面js

    $(document).ready(function () { /*用正则表达式获取url传递的地址参数,split后获得地址数组*/ bmap = new BMap.Map('mapcontaine ...

  10. _WIN32_WINNT not defined. Defaulting to _WIN32_WINNT_MAXVER (see WinSDKVer.h)

    原文地址::http://blog.csdn.net/xiaolongwang2010/article/details/7550505 相关网帖 1.错误找不到WinsdkVer.h----http: ...