1. 字符实现三角效果
关于字符实现三角我早在09年的时候就介绍了:使用字符实现兼容性的圆角尖角效果。一转眼两年过去了,这个技术开始被越来越多的人所熟知。使用的字符是正棱形“◆”字符,编码表示为◆ 

需要一定的裁剪,在极少数情况下,在FireFox浏览器下,棱形“◆”字符的字符显示会有偏差(阳痿体积小)。

根据自己的实践,借助CSS3的transform旋转和IE的旋转滤镜可以比较简单地使用单标签实现上下左右各个方向还算兼容的效果。

  1. .char_corl,.char_corr,.char_cort,.char_corb {
  2. display: inline-block;
  3. width: 6px;
  4. height: 14px;
  5. line-height: 15px;
  6. margin-bottom: -3px;
  7. font-size: 12px;
  8. font-family: '宋体';
  9. overflow: hidden;
  10. }
  11. .char_corr,.char_cort {
  12. text-indent: -5px;
  13. }
  14. .char_corb,.char_cort {
  15. -moz-transform: rotate(-90deg);
  16. -webkit-transform: rotate(-90deg);
  17. -o-transform: rotate(-90deg);
  18. transform: rotate(-90deg);
  19. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  20. position: relative\9;
  21. top:4px\0; *top:-2px;
  22. }
HTML代码:
  1. <span class="char_cort"></span>
  2. <span class="char_corb"></span>
  3. <span class="char_corl"></span>
  4. <span class="char_corr"></span>

2. 图片

3. CSS border实现三角
CSS border生成三角在2010年5月份的时候也专门介绍过:CSS border三角、圆角图形生成技术简介。后来因淘宝UED博客的再次介绍而使该技术被很多同行所熟知。

4.三角生成新法@font-face

技术的发展使得一些效果的实现有了新的解决方案。比如等腰直角三角形状的实现。我们可以借助CSS3 @font-face属性实现。

  1. @font-face{
  2. font-family: web;
  3. src: url(web-webfont.eot); /* IE */
  4. }
  5. @font-face {
  6. font-family: web;
  7. src: url(web-webfont.ttf);
  8. }
  9.  
  10. .font_cor {
  11. font-family: 'web';
  12. }

HTML代码如下:

  1. <span class="font_cor">T</span>
  2. <span class="font_cor">R</span>
  3. <span class="font_cor">B</span>
  4. <span class="font_cor">L</span>
  5.  
  6. 相对于字符法和CSS border法,@font-face法实现三角会多一个服务器请求,但是,权衡其带来的好处,这个不足可以完全秒掉。@font-face方法实现三角的好处在于:颜色随意控制大小随意控制与文字天然对齐(因为其本身就是文字),可以使用CSS3的文字阴影,文字渐变等效果。而颜色、文字大小和文字阴影都是可以被继承的。因此@font-face方法实现的三角具有史无前例的可扩展性和低维护性。

4.1、我该如何使用?

首先是字体的下载(右键[目标|链接]另存为):web-webfont.eot(2.94K) 和 web-webfont.ttf(2.75K)

放在页面同一根目录下(貌似不能跨域),CSS写法就如同上面展示的代码一样。IE虽然很早就支持@font-face属性,但是,毕竟不是来自W3C标准,用法上与现代浏览器还是有些差异的,例如只支持.eot格式字体,多个src不能用逗号分隔写在一起(这是为何@font-face两个部分书写的原因)。

HTML部分,向上的三角对应大写字母T(top),依次,右三角对应R(right),向下三角对应B(bottom),左向三角对应L(left)。

4.2、关于web-webfont.tff等字体的由来

细心的你可能发现了,本文demo所使用的名为”web-webfont“的字体大小不超过3K,对于一个字体而言,是相当相当小的,如何做到的呢?这东西是怎么出来的呢?

如果您没有阅读过前面一篇文章:“fontforge制作自定义字体”建议您先看一下。下面有些内容直接与前文相关联。

webdings字体中的三角
我们电脑上基本上都有这么一个字体:webdings.ttf。这个是个很有意思的字体,该字体中1~9或是a~z这些字符对应的不是中规中矩的字符,而是各式各样的图案。什么地球啊,火车头啊,外星人脸谱,眼睛,耳朵啊,杂七杂八,五花八门。这些图案,我个人觉得在web页面制作中鸡鸡用都没有。不过,有几个图案让我眼前一亮,什么图案呢?当当当当,就是下图所示的这几个三角图案——标准的等腰直角三角形图案:

就跟前文处理webdings字体中的电话图案一样,我们使用fontforge新建个空白字体文件,把这四个三角图形来个移花接木,然后保存为web.ttf文件供我们使用@font-face调用。

兼顾IE浏览器
如果是做针对Android和iphone的手机页面开发,到上面为止,我们直接就可以关电脑去黄浦江钓鱼了。但是,对于PC,我们必须兼顾IE浏览器,于是,还要面对电脑屏幕一会儿……

继续,熟悉@font-face熟悉的同行应该知道IE浏览器只能认识.eot格式的字体,但是fontforge软件无法生成该格式的字体,那该怎么办呢?你猜!(just a joke, ^_^)

有些站点提供字体格式在线转换的功能,例如fontsquirrel,如下地址访问:http://www.fontsquirrel.com/fontface/generator

进入页面后,类似下图所示的操作:
1. 点击“Add Fonts”按钮添加上面偶们保存的web.ttf字体

2. 选择后即上传,然后选中版权OK的复选框,点击下面的按钮下载

3. 然后站点会打包生成一系列的字体相关的zip文件,让你下载

4. 解压会会发现多种格式的字体,像.svg.woff.eot等,根据我的测试,貌似FireFox, Chrome, Opera浏览器都支持.woff格式,但是貌似都不鸟.svg,至于.svg格式字体究竟哪些浏览器或是哪些情况支持还希望有这方面有过研究的人指点下。

同时会发现,相比原字体,转换的新字体的名称都统一加了”-webfont“这一部分,且体积略微增加了点(对比ttf格式可以发现,可能是修复了些问题)。

于是乎,我们就有了.eot格式的字体,自然IE浏览器下自定义字体的显示也不在话下的。

考虑到IE浏览器不支持类似下面的所src串联的写法,所以,需要两段@font-face引导的CSS代码:

  1. @font-face {
  2. font-family: web;
  3. src: url(web-webfont.eot), url(web-webfont.ttf); /* IE不支持 */
  4. }
  1. @font-face{
  2. font-family: web;
  3. src: url(web-webfont.eot);
  4. }
  5. @font-face {
  6. font-family: web;
  7. src: url(web-webfont.ttf);
  8. }

五、引导式的结尾

本文所用自定义字体其实只有4个三角字符,但是却命名为web,而不是triangle,是因为(如同CSS Sprite)我们可以集成其他相关的一些图形,或是从字体中拷贝,或是自己徒手画矢量图形等。

举个例子,WINGDNG3.ttf字体中上下左右的箭头也很有应用潜力:

我们是不是可以选几个靠谱的箭头放在web.ttf这个字体中呢?或是放wingding.ttf字体中的笑脸哭脸表情图形呢?

类似如此,久而久之,我们是不是就有了一个专属于自己的自定义的web开发制作专用字体图案库了呢(命名为web.ttf再合适不过了)?至于如何让团队各个成员熟知不同数值字母所对应的图形含义,可能就需要规范来确定咯!

原文:http://www.zhangxinxu.com/wordpress/2011/11/css3-font-face%E5%85%BC%E5%AE%B9%E6%80%A7%E4%B8%89%E8%A7%92%E6%95%88%E6%9E%9C/

使用css制作三角的更多相关文章

  1. 纯CSS制作三角(转)

    原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...

  2. 用css 制作三角

    html代码: <div class="div"></div> css代码: .div{ border-top:40px solid #ff0077; bo ...

  3. 追求极致--纯css制作三角、圆形按钮,兼容ie6

    参考了天猫.微博等网站的做法,用纯html和css实现,效果还是不错的.以下是成果,兼容主流浏览器,包括ie6. <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  4. 补充:css制作三角

    梯形图案看下面这段样式: .test{width:10px; height:10px; border:10px solid; border-color:#ff3300 #0000ff #339966 ...

  5. 使用css实现三角符号

    关于使用css制作三角符号,网上有很多的例子了,在这里只是为了详细的向各位解释一下三角符号的原理 下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在css中上下左右的边框相交处 ...

  6. 纯css制作带三角border篇(兼容所有浏览器)

    今天帅哥给你们介绍下,如何用 border 来制作三角. html 代码如下: 复制代码 代码如下: <div class="arrow-up"></div> ...

  7. 纯css制作带三角(兼容所有浏览器)

    如何用 border 来制作三角. html 代码如下: 代码如下: <div class="arrow-up"></div> <div class= ...

  8. CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]

    转载链接:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不 ...

  9. 用css制作三角形

    用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...

随机推荐

  1. webstorm 2017.3.5之后 激活

    选择"license server" 输入:http://idea.codebeta.cn

  2. MAC+iTerm定制目录显示颜色和提示符

    知道该如何定制ls时各种类型文件(unix下所有的都是file..)的颜色了. 很简单,就是在.bash_profile下加了三行. export CLICOLOR=1 export LSCOLORS ...

  3. poj 2115 扩展欧几里德

    #include<stdio.h> #include<string.h> #define max 32 typedef long long LL; LL pow2[max+]; ...

  4. Web前端开发的就业前景怎么样,薪资待遇如何

    信息技术的迅速发展,使IT技术者们赶上了一个百年难遇的好机会,尤其是国家出台了“互联网+”的政策后,更是催生了IT行业的就业空间,使其呈现爆发性增长. 如今,微信逐渐成为了大家主要的交流工具,随着各种 ...

  5. mysql数据库外键、主键详解

    一.什么是主键.外键: 关系型数据库中的一条记录中有若干个属性,若其中某一个属性组(注意是组)能唯一标识一条记录,该属性组就可以成为一个主键 比如  学生表(学号,姓名,性别,班级) 其中每个学生的学 ...

  6. CesiumLab V1.4 新功能 BIM数据处理

    我也没想到,BIM数据处理一下拖了这么久才有个交代.我们照例先放图   Revit官方的示例数据   隐藏屋顶+俯视   曾经因为太大而无法导出无法处理的医院模型   室内装修方案模型 最近和很多做b ...

  7. flexget安装

    首先新建一个文件夹给flexget下载种子 Flexgetdownloads 注意:如果先安装flexget再创建文件夹则需要手动去分配权限 然后通过勾选我要试用beta版本,来获取flexget 找 ...

  8. 初识zookeeper以及安装和集群部署

    初识zookeeper以及安装和集群部署     一.Zookeeper单体版安装     在安装zookeeper之前要先安装jdk环境,具体在linux环境安装jdk1.8请参照linux笔记. ...

  9. oracle function学习1

    oracle function学习基层: 函数就是一个有返回值的过程.  首先 知道oracle 使用限制:      函数调用限制: 1. SQL语句中只能调用存储函数(服务器端),而不能调用客户端 ...

  10. 避免闲置云资源浪费 | 阿里云轻量级分布式应用服务 SAE 邀您公测

    您是否遇到过: 资源利用率低,多数服务器CPU平均利用率在10%以下,用户需为大量闲置资源买单. 感知 IaaS 购买和集群运维,人员技能要求高,运维效率低. 想拥抱 Kubernetes.微服务架构 ...