扒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. QUARTZ CRON

    本文来自:http://www.blogjava.net/crazycy/archive/2013/06/06/400287.html 每次使用Quartz Cron的时候都要去查manual doc ...

  2. 449A - Jzzhu and Chocolate 贪心

    一道贪心题,尽量横着切或竖着切,实在不行在交叉切 #include<iostream> #include<stdio.h> using namespace std; int m ...

  3. Akka边学边写（2）-- Echo Server

    EchoServer 上篇文章里,我们用Akka写了一个简单的HelloWorld样例,对Akka(以及Actor模式)有了初步的认识.本文将用Akka写一个EchoServer,看看在Actor的世 ...

  4. Android服务之AIDL

    在android开发过程中,为了让其他的应用程序,也可以访问本应用程序的服务,android系统采用远程过程调用来实现.android通过接口来公开定义的服务.我们将能够夸进程访问的服务成为AIDL服 ...

  5. excel笔记

    提取单元格中的数字部分 =MID(LOOKUP(1,-(1&MID(A1,MIN(FIND({0;1;2;3;4;5;6;7;8;9},A1&1/17)),ROW($1:$15)))) ...

  6. 常用几个UITableView，UICollectionView  UIScrollView关键点

    UITableView   UITableView 在Ios中大量使用,我们对UITableview中的有关知识进行整理     UITAbleView是表视图控制器    1 UITableView ...

  7. [原创]Windows下Google V8 javascript引擎编译

    项目用到将v8嵌入到C++的情况,公司没时间研究,只有在家研究,编译过程一堆坑.记录一下. 网上百度的都是基于vs2010,或者早版本的v8编译,最新版本应该使用vs2013\vs2015.本文介绍的 ...

  8. 小项目--反eclass

    前言—— 最近会把前一段时间闲的无聊写的一些很小的项目写一些博客,用来练练手. 引子—— 最近班里有个很讨厌的软件,,,,教育局规定每个学校要上传多媒体使用记录,所以学校就给班里每台电脑上装了一个比较 ...

  9. navicat for mysql 将结果导出到txt文件

    其实navicat 是带这个导出功能的,可是很多人不知道怎么用. 1.如图:查询sql语句.得到结果

  10. H5 progress标记

    进度条标记 示例:<progress class="processbar" id="processbar" max="100" val ...