html5 三角形

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

<style type="text/css">

    body,div{padding: 0;margin:0;}

    body{background-color: #7ab575;}

    .a{

        margin-left:82px;

        height:0;

        width:0;

        border-width:8px;

        border-style:solid;

        border-color:transparent transparent #fff transparent;

    }

    .b{width:140px;background-color: #fff; color:#999; padding:16px;font-size: 12px;}

    .ab{border:1px solid red; width:172px;}

</style>

</head>

<body>

    <div class="ab">

        <div class="a"></div>

        <div class="b">按时考勤上课，不缺课，每缺一节课 = 实际上课次数总课数*100计算。</div>

    </div>

</body>

</html>

html5 三角形的更多相关文章

  1. html5 css写出一个实心三角形和空心三角行

    原理:css中的border属性的特殊性. 实心三角形: html5: <div id="mydiv"></div> css: #mydiv{ height ...

  2. 今天我们要说的画一个三角形，恩，画一个三角形，第一种呢是利用我们的html标签结合css来实现；而第二种方法就就是我们的html5新增的一个标签canves,这个canves就是网页画幕，那么顾名思义就是在网页里建造一个画板，用来画画，好，那接下来就和我一起去看看吧！

    第一种方法:利用我们的html标签结合css来实现 span{ width:0px; height:0px; border-width:7px; border-style:solid; border- ...

  3. 小练手：用HTML5 Canvas绘制谢尔宾斯基三角形

    文章首发于我的知乎专栏,原地址:https://zhuanlan.zhihu.com/p/26606208 以前看到过一个问题:谢尔宾斯基三角形能用编程写出来么?该怎么写? - 知乎,在回答里,各方大 ...

  4. 去除HTML5 SUMMARY 标签前的三角形

    在CSS添加如下代码(Chrome): details summary::-webkit-details-marker { display:none; }

  5. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

  6. 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  7. WebGL入门教程(二)-webgl绘制三角形

    前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用web ...

  8. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  9. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

随机推荐

  1. NOIP 2010题解

    唔..NOIP2010比较简单,总体感觉不错. Problem 1: 机器翻译 水题,队列的简单应用. 读入时判断是否在内存中,可以用hash优化.如果不在内存中push进内存,放不下了pop hea ...

  2. Redis Sentinel机制与用法（一）

    Sentinel spring 集群配置: 概述 Redis-Sentinel是Redis官方推荐的高可用性(HA)解决方案,当用Redis做Master-slave的高可用方案时,假如master宕 ...

  3. Oracl各个版本的下载地址

    http://www.oracle.com/technetwork/cn/database/enterprise-edition/downloads/112010-win32soft-098630-z ...

  4. oracle数据库两表数据比较

    本文转自http://blog.sina.com.cn/s/blog_3ff4e1ad0100tdl2.html 1 引言 在程序设计的过程中,往往会遇到两个记录集的比较.如华东电网PMS接口中实现传 ...

  5. 开始学习C++

    这里突然想起来当初学习java和C# 总是会有个demo :  hello  world. 这里我记得我曾经看过一个笑话.说有个程序员,想学习书法,买了笔墨,都准备好了,但是不知道写什么好.最后,他大 ...

  6. pip 安装命令

    pip官网文档 https://pip.pypa.io/en/latest/reference/pip.html 若没有将c:\Python27\Scripts加入到path环境变量,可以在c:\Py ...

  7. iOS App Extensions 推荐文章

    写的非常不错,读完后,基本的extension的套路就清楚了,也是我们的园友写的,感谢他: http://www.cnblogs.com/xdream86/p/3855932.html 下面这个教程是 ...

  8. ACM/ICPC 之 Bellman Ford练习题(ZOJ1791(POJ1613))

    这道题稍复杂一些,需要掌握字符串输入的处理+限制了可以行走的时间. ZOJ1791(POJ1613)-Cave Raider //限制行走时间的最短路 //POJ1613-ZOJ1791 //Time ...

  9. ACM/ICPC 之 枚举(POJ1681-画家问题+POJ1166-拨钟问题+POJ1054-讨厌的青蛙)

    POJ1681-画家问题 枚举的经典例题,枚举第一行即可,其余行唯一. //画家问题,y表示黄色,w表示白色,怎样让墙上所有方格为y,操作类似熄灯问题poj1222 //memory 136K Tim ...

  10. ASM:《X86汇编语言-从实模式到保护模式》1-4章：处理器，内存和硬盘基础

    其实很久之前就学完了实模式了,但是一直没有总结,感觉现在直接在书上做笔记的弊端就是有些知识点不能很很深刻地记下来(毕竟手写最明显的优点就是能深刻地记住知识,但是就是用太多的时间罢了).一下内容都是一些 ...