在网页中，你在很多地方都能看到倒三角，比如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. Linux 关于解压

    1.*.tar 用 tar –xvf 解压 2.*.gz 用 gzip -d或者gunzip 解压 3.*.tar.gz和*.tgz 用 tar –xzf 解压 4.*.bz2 用 bzip2 -d或 ...

  2. 升级10.10 Yosemite 后，cocoapods 出现错误(解决方案)

    RSMacBook-Pro:~ RS$ pod search jsonkit /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/li ...

  3. dedecms织梦二级菜单的实现方法

    首先,复制代码: 程序代码 {dede:channelartlist typeid='top' cacheid='channelsonlist'} {dede:channel type='son' n ...

  4. C语言结构体（struct）使用方法

    基本定义:结构体,通俗讲就像是打包封装,把一些变量有共同特征(比如同属于某一类事物的属性)的变量封装在内部,通过一定方法访问修改内部变量. 结构体定义: 第一种:只有结构体定义 struct stuf ...

  5. Linux系统管理技术手册——第6章 添加新用户

    6.1/etc/passwd文件 用户登录时Linux识别用户的文件/etc/passwd /etc/passwd包括7个字段: 登录名(不超过32位,使用NIS系统后不超过8位) 经过加密的口令或口 ...

  6. python 时间戳

    import timeprint time.time()输出的结果是(单位:s):1395421406.39 x = time.localtime(x) x = time.strftime('%Y-% ...

  7. Unity3d 随机地图生成

    2D解析图: 3D地形: 嘿嘿.

  8. 工作总结：WPF技术讲解（大纲）

    一.WPF的历史 首先给大家讲述一下Winform的发展里程来展示WPF的历史,告诉大家WPF是在什么背景下诞生的. 二.WPF的特性 与MFC.Windows相比,WPF具有3D呈现特性,XMAL是 ...

  9. 启明星辰：安全管理平台（SOC）

    泰 合信息安全运营中心(Security Operation Center)系统是一个以IT资产为基础,以业务信息系统为核心,以客户体验为指引,从监控.审计.风险.运维四个维度建立起来的一套可度量的统 ...

  10. Maven的常用命令

    转载:http://www.cnblogs.com/phoebus0501/archive/2011/05/10/2042511.html Maven库: http://repo2.maven.org ...