扒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. Linux FTP安装与简单配置

    1.检測是否原有启动 ps -ef|grep vsftpd 2.检測是否有安装包 rpm -qa|grep vsftpd 3.假设有输出.查看状态并启动 service vsftp status  - ...

  2. 用 oracle vitual box 克隆虚拟机，找不到eth0的解决方案

    用 oracle vitual box 克隆虚拟机 当我们需要使用多台虚拟机的时候,如果一台一台的安装,实在是太过麻烦了.所以一般的虚拟机软件都为我们提供了克隆已有虚拟机状态的功能.Oracle vi ...

  3. background小结

    CSS背景属性Background详解 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. ...

  4. XML新手入门 创建构造良好的XML(1)

    XML新手入门 创建构造良好的XML(1) 2009-03-19 09:24 Kay Whatley IBM Developerworks 我要评论(0) 字号:T | T 本文描述了构建良好的XML ...

  5. sublime工具 插件自动补全方法

    自动补全(emmet),输入对应的关键字(html标签)---tab键 http://www.emmet.io/ 代码片段 只需要输入自己的关键字--tab键 操作: 添加代码片段,然后保存 保存 使 ...

  6. DOMDocument类文件

    http://php.net/manual/en/class.domdocument.php <?php $xml = <<< XML <?xml version=&qu ...

  7. CSS混合模式

    前面的话   层叠上下文z-index只是解决两个元素覆盖,谁离用户更近的问题.而CSS混合模式,则是处理两个元素覆盖部分如何混合的问题.如果了解photoshop的话,对这种现象应该不陌生.CSS3 ...

  8. PHP扩展开发之PHP的启动与终止

    PHP程序的启动可以看做是两个概念上的启动,终止也有两个概念上的终止.其中一个是PHP作为Apache(拿它举例,板砖勿扔)的一个模块的启动与终止, 这次启动php会初始化一些必要数据,比如与宿主Ap ...

  9. Django 1.6 基于类的通用视图

    Django 1.6 基于类的通用视图 最初 django 的视图都是用函数实现的,后来开发出一些通用视图函数,以取代某些常见的重复性代码.通用视图就像是一些封装好的处理器,使用它们的时候只须要给出特 ...

  10. Big Number

    问题陈述: 杭州电子科技大学 HANGZHOU DIANZI UNIVERSITY Online Judge Problem - 1018 问题解析: 公式一: n! = 10^m => lg( ...