扒segmentfault的导航栏时候发现的，用了个span标签写了个三角形出来，第一次发现，好神奇，查了下还有挺多种玩法的。基本的用法就是将盒子的width和height设为0，然后用border搭配transparent去实现不同方向的三角形。

http://caibaojian.com/css-border-triangle.html

http://www.cnblogs.com/blosaa/p/3823695.html

http://www.jb51.net/article/42513.htm

纯CSS绘制三角形的更多相关文章

  1. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  2. CSS学习笔记（8）--纯CSS绘制三角形（各种角度）

    纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单.   我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...

  3. 纯Css绘制三角形箭头三种方法

    在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...

  4. 纯CSS绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  5. 纯CSS绘制三角形（各种角度）类似于使用字符画法，根据位移不同，也可以使用两个元素画出三角边框

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  6. 纯 CSS 绘制三角形（各种角度）

     转载:https://www.cnblogs.com/lhb25/p/css-and-css3-triangle.html       Triangle Up #triangle-up { widt ...

  7. CSS 魔法系列：纯 CSS 绘制图形（各种形状的钻石）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  8. 纯CCS绘制三角形箭头图案

    用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码: /* create an arrow that points up */ div.ar ...

  9. 摘记 史上最强大的40多个纯CSS绘制的图形（一）

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

随机推荐

  1. x86汇编指令具体解释

    80x86指令系统 80x86指令系统,指令按功能可分为下面七个部分. (1) 数据传送指令. (2) 算术运算指令. (3) 逻辑运算指令. (4) 串操作指令. (5) 控制转移指令. (6) 处 ...

  2. 【贪心】【Uva11729】 Commando War

    你有n个部下,每个部下需要完成一项任务.第i个部下需要你花Bi分钟交待任务,然后他会立刻独立地.无间断地执行Ji分钟后完成任务.你需要选择交待任务的顺序,使得所有任务尽早执行完毕(即最后一个执行完的任 ...

  3. Using platform encoding (UTF-8 actually) to copy filtered resources, i.e. build is platform dependent

    修改pom.xml文件,添加以下属性 <project> ... <properties> <project.build.sourceEncoding>UTF-8& ...

  4. Hadoop： HDFS 格式化时，出现 “ERROR namenode.NameNode: java.io.IOException: Cannot create directory /usr/hadoop/tmp/dfs/name/current”

    原因是 没有设置 /usr/hadoop/tmp 的权限没有设置, 将之改为: chown –R hadoop:hadoop /usr/hadoop/tmp 查看:

  5. 通过递归方法对一个单词所有的组合进行列举(java)

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; public ...

  6. 出发 Let's Go

    今天是中秋佳节,而恰好我这天过生日,晚上睡觉前又恰好听到温岚唱的祝我生日快乐,心里挺高兴的. 最近,由于公司需要,可能要学习Python和Tribon了,全是未知的,一点不了解的东西,也忽然想起了在这 ...

  7. Populating Next Right Pointers in Each Node,Populating Next Right Pointers in Each Node II

    Populating Next Right Pointers in Each Node Total Accepted: 72323 Total Submissions: 199207 Difficul ...

  8. Go 语言读写 Excel

    Excelize 是 Golang 编写的一个用来操作 Office Excel 文档类库,基于微软的 Office OpenXML 标准.可以使用它来读取.写入 XLSX 文件.相比较其他的开源类库 ...

  9. javascript 给关键字加链接

    var keys = { "和尚":["http://www.baidu.com","#ff0000"], "系统":[ ...

  10. oracle add_months函数的用法详解

    如果需要取上一个月的数据,并且每天都要进行此操作,每次都需要改时间,的确非常的麻烦,所以想到了oracle add_months函数这个函数 oracle add_months函数: oracle a ...