在网页中，你在很多地方都能看到倒三角，比如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. undefined与null的区别（待修整）

    没有实体的对象称为空对象.只用对象的引用,而不存在引用的实体对象 就叫做空对象 在常见的强类型语言中,通常有一个表示"空"的值,比如NULL.但是在Javascript中,空(或者 ...

  2. ICE学习第一步-----配置ICE环境变量

    安装 ICE: 1.下载ICE: http://www.zeroc.com/download.html 下载说明:ICE支持语言(C++, Java, C#, Visual Basic,Python, ...

  3. java File delete 无法删除文件的原因。

    windows下使用java.io.File.delete()方法删除文件时,返回值为true. 但是本地文件仍然存在,也就是说没有删除成功. 这时候你要检查下你传进来的文件目录格式是否正确. 正确: ...

  4. C#，新建的系统服务项目有些机器不能运行

    检查了一下,是权限的问题 右键ProjectInstaller.cs 在设计界面里找到serviceProcessInstaller1右键属性 找到Account属性改为:LocalSystem

  5. 当INPUT 连续输入是连续触发

    在 Web 开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制.剪贴和粘贴这些操作,处理 ...

  6. IOS 命令行安装备忘

    1. 首先要越狱 2. 新增BIGBOSS或者苹果核的源 3. 安装MobileTerminal和MobileTerm Backgrounder (用于后台运行命令),最好r520以上版本,R530还 ...

  7. 复杂事件处理——Esper入门（示例程序）

    前面对Esper Quick Start & Tutorial进行了简单描述,希望各位看官能够大致了解what is Esper,甚至对how to work有朦朦胧胧的了解. 开发一个Esp ...

  8. JSP - request - 1

    <%@ page language="java" contentType="text/html;charset=utf8" %> <%@ pa ...

  9. 堆和栈的区别【zz】

    一.预备知识—程序的内存分配一个由c/C++编译的程序占用的内存分为以下几个部分1.栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式类似于数据结构中的栈.2. ...

  10. Inno Setup安装时不能关闭指定进程

    脚本由 Inno Setup 脚本向导 生成!; 有关创建 Inno Setup 脚本文件的详细资料请查阅帮助文档! #define MyAppName "XX管理系统"#defi ...