绘制梯形

width:10px;

border-top:10px solid red;

border-right:10px solid transparent;

border-left:10px solid transparent;

border-bottom:10px solid transparent;

绘制三角形：

width:0px;

border-top:10px solid red;

border-right:10px solid transparent;

border-left:10px solid transparent;

border-bottom:10px solid transparent;

绘制直角三角形：

width:0px;

border-top:20px solid red;

border-right:0px solid transparent;

border-left:10px solid transparent;

border-bottom:10px solid transparent;

CSS利用border绘制图性的更多相关文章

  1. css 利用border 绘制三角形. triangle

    1.基础三角形. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. CSS 利用border三角形绘制方法

    CSS 三角形绘制方法,这里面的transparent比较重要,有和没有影响很大: 原理:这个div是由4个三角形组成,每个三角对应一个border,隐藏其它3个border,就可以得到一个三角形. ...

  3. css 利用border属性制作箭头 Using Borders to Make Pure CSS Arrows

    不再需要多余的图片 用border属性自然能创造箭头效果 学习地址:http://tech.patientslikeme.com/2010/11/09/using-borders-to-make-pu ...

  4. css中border制作各种形状

    css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...

  5. 利用css的border实现画三角形思路原理

    1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较 ...

  6. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  7. JS canvas标签动态绘制图型

    使用canvas标签动态绘制图型,当点击鼠标时,以鼠标点击的坐标作为图形中心点.当点击数为偶数时画三角形,当点击数为奇数时画五角星 <!DOCTYPE HTML> <html> ...

  8. 重温CSS：Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  9. CSS 的 border 样式

    制作过网页的人都有为画线而烦恼的经历,先来认识一下“Border”(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD.DIV等等)画边框,它可以定义边框线的类型.宽度和颜色, ...

随机推荐

  1. [window] Pyhton轻便好用的spyder IDE如何去除E501 line too long提示

    spyder 使用pep8作为代码规范的标准,默认单行长度是89个字符以内. 作为一个完美控,在使用spyer有的进行coding时,每当看到以下这个小小的warning时,心情都不是很爽: 89个字 ...

  2. Codeforces Round #351(Div 2)

    熬到半夜打结果前一个小时提交代码的页面根本加载不进去,D题写完还因为小点没判被hack掉了... rating什么的都是身外之物了,于是乎喜闻乐见地又掉回绿名了. A题: *题目描述: Bear看一场 ...

  3. Hadoop 服务SYS CPU过高导致宕机问题

    最近某hadoop集群多次出现机器宕机,现象为瞬间机器的sys cpu增长至100%,机器无法登录.只能硬件重启,ganglia cpu信息如下: 首先怀疑有用户启动了比较奇葩的job,导致不合理的系 ...

  4. java valueOf

    valueOf 方法可以将原生数值类型转化为对应的Number类型,java.lang.Number 基类包括ouble.Float.Byte.Short.Integer 以及 Long派生类, 也可 ...

  5. java poi 导入导出Excel xsl xslx

    import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import  ...

  6. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第3节 Random类_9-生成指定范围的随机数

    左闭右开区间

  7. Week 12 - 673.Number of Longest Increasing Subsequence

    Week 12 - 673.Number of Longest Increasing Subsequence Given an unsorted array of integers, find the ...

  8. 类File

    * File类常用的构造方法: * (1)File(String s);//由s确定File对象的文件名 * (2)File(String directory,String s);//由directo ...

  9. Bootstrap 学习笔记 项目实战 响应式轮播图

    左右两个箭头可以随浏览器缩放进行移动 保持在图片中间 Html代码: <!DOCTYPE html> <html lang="zh-cn"> <hea ...

  10. 数论-欧拉函数-LightOJ - 1370

    我是知道φ(n)=n-1,n为质数  的,然后给的样例在纸上一算,嗯,好像是找往上最近的质数就行了,而且有些合数的欧拉函数值还会比比它小一点的质数的欧拉函数值要小,所以坚定了往上找最近的质数的决心—— ...