扒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. java web分页查询初试

    ssh2分页查询初试,放着记录学习一下. entity:student.java: package com.zte.entity; /** * 数据持久化,跟数据库的的相应的表的字段是对应的. * * ...

  2. zTree实现清空选中的第一个节点的子节点

    zTree实现清空选中的第一个节点的子节点 1.实现源代码 <!DOCTYPE html> <html> <head> <title>zTree实现基本 ...

  3. Multiscale Combinatorial Grouping 学习和理解源代码(一)

    目标探测由于所做的最新研究.因此,这一领域的一般阅读文章.发现这篇文章,效果是比较新的比较好.在如此仔细研究.贴纸和共享.下面已经发布若干个连续的,分别对论文和代码进行大致地介绍,最后依据自己的实验对 ...

  4. 使用 React 和 Flux 创建一个记事本应用

    React,来自 Facebook,是一个用来创建用户界面的非常优秀的类库.唯一的问题是 React 不会关注于你的应用如何处理数据.大多数人把 React 当做 MV* 中的 V.所以,Facebo ...

  5. linux 能访问内网，但不能访问外网?解决方案

    用iptables就可以了 iptables -F iptables -t nat -F iptables -A INPUT -s -d -j ACCEPT iptables -A INPUT -d ...

  6. VS2003,安装程序检测到另一个程序…

    昨天在安装Visual Studio .Net 2003时,出现一个对话框   "安装程序检测到另一个程序要求计算机重新启动.必须重新启动计算机后才能安装visual studio.net系 ...

  7. Sql中的Exists和in

    最近学习数据库的分页算法,提到第一种 SELECT TOP 页大小 *FROM table1WHERE id NOT IN          (          SELECT TOP 页大小*(页数 ...

  8. WindowsForm 流

    流 包括输入流代码 输出流代码 流: 输入流: string filename = openFileDialog1.FileName; //通过读入流进行文件读取 StreamReader sr = ...

  9. 【转】VS2010中文注释带红色下划线的解决方法

    转载自:http://blog.csdn.net/whatday/article/details/7856323 环境:Visual Studio 2010 问题:代码中出现中文后会带下划线,很多时候 ...

  10. nodejs学习随机记录

    1. nodejs的顶层对象:global(nodejs中没有window) 2. nodejs一个文件就是一个模块 每个模块都有自己的作用域 通过var声明的变量,只属于当前模块下,并非全局的 va ...