在网页中，你在很多地方都能看到倒三角，比如tooltips，下拉菜单等。大家有几种方式来实现呢？

1.BASE64编码 图片

假如你已经有了三角形的图片，并且减少HTTP请求，那么将这个图片转换成一个BASE64字符串是最好的解决方案。

有用的工具

http://webcodertools.com/imagetobase64converter

http://image2base64.wemakesites.net/

优点

  • 你可以按照自己的思想设计阴影，渐变等，然后对其进行转换编码

缺点

  • 你需要使用一个图片编辑软件去设计
  • 对于较大的图片，最终转换成字符串占用大小会很大
  • 旧版本的浏览器，如：IE6/IE7是不兼容的

2.CSS 边框

<html>

<title>倒三角演示代码1</title>

<head>

 <style type="text/css">

        .triangleDiv{

            border-color: #57af1a #fff #fff #fff;

            border-style: solid;

            border-width: 100px 60px 0 60px;

            height: 0;

            width: 0;

        }

    </style>

</head>

<body>

<div class='triangleDiv'></div>

</body>

</html>　　

优点

  • 很容易的通过修改一些CSS代码属性值而更改颜色和大小
  • 这是一个跨浏览器的解决方案。

缺点

  • 这个方式使用的是border,所以你不能添加阴影、渐变、和其他一些CSS3效果
  • 请记住，IE6是不支持透明边界的-如果你关心这个问题
  • 如果你使用火狐浏览器，要知道，CSS的“透明”有时可能不会是透明的

3.Unicode字符

<html>

<title>倒三角演示代码2</title>

<head>

 <style type="text/css">

        .triangleDiv{

            font-size: 18px;

            color: #f7931d;

            text-shadow: 0 1px 1px rgb(99, 95, 92);

        }

    </style>

</head>

<body>

<span class='triangleDiv'>▼</span>

</body>

</html>　　
　　

优点

  • 它是一个跨浏览器的技术
  • 您可以使用CSS3的text-shadow属性添加阴影。

缺点

  • 不能使用太多的CSS3效果，除了使用文字阴影。
  • 在所有的浏览器，这是相当不可能实现像素完美。

4.CSS 旋转正方形

<html>

<title>倒三角演示代码3</title>

<head>

    <style type="text/css">

        .parentDiv {

            height: 14px;

            overflow: hidden;

        }

        .triangleDiv {

            position: relative;

            height: 20px;

            width: 12px;

            top: -12px;

            left: 7px;

            background: #0c0c0c;

            -moz-transform: rotate(45deg);

            -webkit-transform: rotate(45deg);

            -o-transform: rotate(45deg);

            transform: rotate(45deg);

        }

    </style>

</head>

<body>

<div class="parentDiv">

    <div class="triangleDiv"></div>

</div>

</body>

</html>　　

优点

  • CSS3阴影，渐变等可以更多的使用

缺点

  • 这个解决方案不是跨浏览器的,首先是因为CSS3旋转。

css倒三角的几种实现方式的更多相关文章

  1. CSS【03】：CSS 基础选择器与三种引入方式

    基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...

  2. html5 中的 css样式单 的 两种调用方式的区别

    在 html5 中 使用 css 样式单的方式 有4种: 1.链接外部样式文件:将样式文件 彻底与 html 文档分离,样式文件需要额外引入,这种情况下 一批样式 可以控制多份文档.对于好多文件都共有 ...

  3. css左右布局的几种实现方式和优缺点

    记录一下左右布局的实现方式,实现的具体效果是,左侧固定宽度,高度适中等于父元素的高度,父元素的高度由右侧内容决定: html代码如下: <div class="parent" ...

  4. CSS隐藏元素的N种实现方式。

    1. width:0; 光有高度是不行的,还得有宽度.缺点文字隐藏不了,可以加个color:#fff和背景颜色一样就ok了,障眼法,迷惑人的,其实内容还在,如果有文字的话,还是可以触发点击事件的,这种 ...

  5. CSS垂直居中的11种实现方式

    今天是邓呆呆球衣退役的日子,在这个颇具纪念意义的日子里我写下自己的第一篇博客,还望前辈们多多提携,多多指教! 接下来,就进入正文,来说说关于垂直居中的事.(以下这11种垂直居中的实现方式均为笔者在日常 ...

  6. CSS的4种引入方式及优先级

    第一:css的四种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; " ...

  7. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  8. html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  9. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

随机推荐

  1. vs 2013 编译zlib

    zlib下载地址: http://pan.baidu.com/s/1pJqTcoV \zlib-1.2.8\contrib\vstudio\vc10\zlibvc.sln 打开这个文件, 根据提示, ...

  2. CetnOS minimal 网络不可用

    系统版本: CentOS-6.6-i386-minimal 问题说明: CentOS minimal 在安装完成之后,网络不可用,一些常见的命令报错,如: ping: unknow host xxxy ...

  3. javascript中的基本数据类型

    在javascipt中有五大基本数据类型,列表如下: 1.数字 他们又又包括(正负整数,浮点数)十进制数,十六进制数与八进制数,指数和特殊数值NaN,(Infinity,-Infinity)正负无穷 ...

  4. openerp import namespace

    # If True, the Python modules inside the openerp namespace are made available# without the 'openerp. ...

  5. MS Writer Code Test

    #include<iostream> using namepspace std; int main() { cout<<"Hello World"<& ...

  6. const 笔记

    .指向const的指针例如:double a=1.01;const double * b=&a;*b=2.1; //这显然是错误的a=2.1; //这是正确的,a和*b的值都会变成2.01,有 ...

  7. Unity干中学——如何实现类似Windows Store 应用程序和Android Toast的通知？

    要实现通知中心功能,首先要创建一个游戏物体,在上面挂载GUITeture和GUIText脚本.注意GUITexture和GUIText脚本的顺序,GUITexture在前,GUIText在后,否则GU ...

  8. [BZOJ 1303] [CQOI2009] 中位数图 【0.0】

    题目链接:BZOJ - 1303 题目分析 首先,找到 b 的位置 Pos, 然后将数列中小于 b 的值赋为 -1 ,大于 b 的值赋为 1 . 从 b 向左扩展,不断算 Sum[i, b - 1] ...

  9. cf B Very Beautiful Number

    题意:给你两个数p和x,然后让你找出一个长度为p的数,把它的最后移到最前面之后得到的数是原来数字的x倍,有很多这样的数取最小. 思路:枚举最后一位,然后就可以推出整个的一个数,然后比较得到的数的第一个 ...

  10. RichEdit中插入带背景色文本的一种思路

    uses RichEdit; function TextToRtf( // 将文本处理为RTF格式 mText: WideString // 输入文本 ): WideString; // 返回处理后的 ...